Develop Reference

Combine, Minify, and convert to ES5 with WebPack and Babel

I have a project that works perfect and was written in TS, I had to convert it to plain JS and it works for the most part. The issue where I am struggling is removing the default WebPack loader after the files have been combined and minified, WebPack includes a loader to the final output even thought I do not need a loader since all the files are combined into one large file.
+ filea.js
+ fileb.js
+ filec.js
+ filed.js
-> output bundle.js
I have read a few articles/posts that recommend manually creating a config file providing the name of each of the files that will combined and minified, this may work OK but the problem is that the project I am working on is broken into small chunks (modules) so that tools such WebPack can be smart enough and know when a file should be added as a dependency in the final output.
I know we can combine and minify multiple individual JS files but when it comes to exporting a single file it seems like the task is trivial With TS but in the vanilla JS world there is little or no information about the subject.

I don't understand something, do you want to have one big file or small individual modules (chunks)?
An example of small modules:
module.exports = {  
entry: {    
app: './src/app.js',
admin: './src/admin.js',
contact: './src/contact.js'  
}
};
Another method is one main module and it contains all smaller modules.
module.exports = {  
entry: {    
app: './src/app.js'  
}
};
You can also use something like lazy loading. Then the modules (chunks) will be dynamically loaded only when needed. lazy-loading
Here is an example of using several entries webpack-boilerplate.

Sounds like you have a project with several JS files and you want to use webpack to bundle all of them and minify the result.
Webpack was built for this.
You'll need to add a build step in your package.json like this:
"scripts": {
"build": "webpack --config prod.config.js"
}
Then you'll need to create a webpack.config.js with a module.exports block that has an entry point and rules to include in your project. The following should be a minimal setup that can get your started:
const path = require('path');
module.exports = {
entry: "./your/path/to/src",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {},
plugins: [
new MinifyPlugin(minifyOpts, pluginOpts)
]
}
You can add modules that perform additional code transpilation for files that matcha a certain regex. You can also use a plugin to perform minification such as babel-minify-webpack-plugin as documented here https://webpack.js.org/plugins/babel-minify-webpack-plugin/. (Note you will need to add this dependency.)
The full webpack configuration can be found here: https://webpack.js.org/configuration/

Webpack to "ignore" some entrypoints

I'm using Webpack to build my front end components.
I have some React components which need classic webpack bundling, though I also have some vanilla JS files.
Those latter files are independent, so they won't get imported from React files. From my understanding, they need to be defined as entrypoints, so that Webpack reads and processes them. So far, so good.
The trouble is that I'd like Webpack to load them with Babel, and that's all, only give me back the JS file processed through Babel, I'm not interested in a bundle for these files.
Is it possible to do that? Only get the result of the babel loader, and not produce a bundle for some entrypoints?
Maybe I shouldn't use Webpack at all for these files?
Or maybe I should just set these bundles as 'library' so that I can reach them from the HTML pages?
What do you think guys?
Thanks by advance ;)

depends on how easy it is to find these files. I have a project that has similar requirement. What I have done is:
1/ put the vanilla js file in third_party/lib/
2/ import/require them in my current project
3/ set up my webpack.config.js as follows:
module.export = {
module: {
rules: [{
test : /.js$/,
exclude : /node_modules|third_party/,
loaders : ['babel-loader' /* other loaders? */],
},{
test : /third_party.*?\.js$/,
use: [{
loader : 'babel-loader' // or other loaders
},{
loader: 'file-loader'
options: {
name : '[path][name].[ext]',
outputPath : 'dist/third_party'
}
}]
}]
}
}
oh, you will need to npm i --save-dev file-loader
edit: I should clarify that this will bundle the vanilla js file as separate files to your main bundle, so you will have to import them by script tags yourself in your html file. (or if they were worker files, called by your script)

webpack load AMD modules without bundling

I'm migrating a web app from requireJS to webpack.
With requireJS, I have different configurations depending on the environment.
For live environment I use r.js to minify and bundle all of my
modules and their dependencies into a single file. Afterwards, I add
almondJS to manage the dependencies and then I load my js bundle like the following:
<script src="bundle.min.js"></script>
For my development environment, I Load requireJS like this:
<script src="require.js" data-main="/main-config"></script>
and requireJS will use my configuration file specified by data-main, to load modules and their
dependencies asynchronously
As you can see, with requireJS module loading and bundling are two separate processes and that allows me to debug AMD modules during development without needing sourcemaps
How can I achieve this scenario using webpack as a module loader only without bundling during development ?
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?

How can I achieve this scenario using webpack as a module loader only without bundling during development ?
Webpack will always bundle, despite the envieronment.
If this is not possible, is there any other way I can see my source files in the browser debugger without generating sourcemaps?
If your code is transpiled/compiled, you'll need sourcemaps to see that. There is no way to workaround that.

It's true that if your code is transpiled then you'll need sourcemaps. But it is possible to get around bundling though. Yes, webpack will really always try to bundle, but with plugins the code can be taken out of the bundle and placed in the output directory as if it was simply run through the transpiler.
I have a node application that I want to simply transpile to ES5 file-by-file and not bundle anything. So my config to do that is roughly this:
let config = {
entry: [
glob.sync(srcDir + '/**/*.js') // get all .js files from the source dir
],
output : {
filename : '[name].rem.js', // webpack wants to bundle - it can bundle here ;)
path: outDir
},
resolve: {
alias: {
'app': appDir
}
},
plugins: [
new RemoveEmptyScriptsPlugin({extensions: ['js'], scriptExtensions: /\.rem\.js/}) // for all .js source files that get bundled remove the bundle .rem.js file
],
module: {
rules:[{
test: /\.jsx?$/,
type: 'asset/resource', // get webpack to take it out instead of bundling
generator: {
filename: ({filename}) => filename // return full file name so directory structure is preserved
},
use: {
loader: 'babel-loader',
options: {
targets: { node: 16 },
presets: [
['#babel/preset-env', { modules: 'commonjs' /* transpile import/export */}],
]
}
}
}]
}
};
// Since the code does not go through the full pipeline and imports are not getting resolved, aliases will remain in the code.
// To resolve them it takes to hack the aliases object into the babel config
config.module.rules[0].use.options.plugins.push(['babel-plugin-webpack-alias-7', {config: {resolve: {alias: config.resolve.alias}}}];
But then it appeared that the currently published babel-plugin-webpack-alias-7 does not support providing an Object to the config option so I had to patch the plugin https://github.com/shortminds/babel-plugin-webpack-alias-7/pull/22
Ah, and then the webpack-remove-empty-scripts plugin had an issue with my idea so I had to patch that too https://github.com/webdiscus/webpack-remove-empty-scripts/pull/6

Using Webpack and stylus to create static css

new to Webpack. I was thinking about migrating JS part of my application to it. However, I don't like the way it handles CSS. Would like to keep it easy and link them on my own. Unfurtunately documentation wasn't very helpful, same with the search results.
So, what do I need exactly?
Stylus compilation from lots of .styl files to static .css.
There will be three static stylesheet files (entry points?), but completely different from entry points of JS part of an application.
Also some "watch" feature, which would compile css when one of source .styl files has been changed.
Is there somebody who could point me in right direction, maybe write a config? Is this even possible with Webpack or should I stay with Grunt?
Thanks for any useful answer.

To learn more about the details of Webpack you can refer to this online book SurviveJS - Webpack, which will walk you through most of concepts related to Webpack.
To accomplish what you need you can start by creating webpack.config.js in the root of your project and it can be like this:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './entry.js', // you application entry point
output: {
filename: 'bundle.js', // resulting bundle file
path: './public' // the output folder path
},
module: {
loaders: [
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
}
]
},
plugins: [
new ExtractTextPlugin('style.css') // output css bundle
]
};
Then require your stylus files in you entry.js file require('./style.styl');
Don't forget to install required loaders and plugins
npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin

Bundling and minification of angular2 project, Js and Html

Been working on an angular2 project for a while now, after updating it from angular1 (loving angular2 btw).
Now i would like to bundle the project, but unsure what is the best bundler to use?
Also i see some posts saying that they split the bundle into multiple files (like app.bundle.js and vendors.bundle.js) and others have 1 large file. What is the best method? I always throught that many files were better because browsers can download multiple files at the same time?
Do you need to use a gulp task for all this, or something else completely?
Also, how can i minify the HTML templates in an angular2 app?

You can either use Webpack or Systemjs-Builder to bundle your app. There are tons of seed projects from which you can take hints e.g. this and this and you can use this in your gulp task to inline the templates with your build.

Now i would like to bundle the project, but unsure what is the best bundler to use?
All answers to your questions will be subjective, but it is factual that Webpack offers plugins and configuration settings to suit your needs.
Also i see some posts saying that they split the bundle into multiple files (like app.bundle.js and vendors.bundle.js) and others have 1 large file. What is the best method?
Splitting into multiple files is definitely the most common method. It allows you to keep your application code separated from your dependencies, which makes debugging less of a nightmare.
The part of your Webpack config file that handles this might look something like this:
// our angular app
entry: { 'vendor': './src/vendor.ts', 'main': './src/main.ts' },
// Config for our build files
output: {
path: '',
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
Do you need to use a gulp task for all this, or something else completely?
If you use Webpack, then Gulp is not required at all. I'd recommend just using NPM scripts. Don't quote me on this, but I think Webpack can just flat out replace Gulp for Angular2 projects.
Also, how can i minify the HTML templates in an angular2 app?
Webpack has a HTML minify plugin for this.
You can use it like so:
loaders: [
{
test: /\.html$/,
name: "mandrillTemplates",
loader: 'raw!html-minify' // raw is another loader
}
]