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

Question

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.

score 1 · Answer 1 · answered Jan 10 '20 at 06:23

1

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.

answered Jan 10 '20 at 06:23

Grzegorz T.

3,903
2
11
24

Thanks @Grzegorz T, I have updated my post to clarify the question which is more about the WebPack loader that is being added but not needed. – Helmut Granda Jan 10 '20 at 07:35
The best solution is when you show the webpack and tell what version you have installed. I have a strange feeling that you are using CommonsChunkPlugin instead of SplitChunksPlugin. Take a look at this [webpack-remove-webpackbootstrap-code](https://stackoverflow.com/questions/43484895/webpack-remove-webpackbootstrap-code) and this [optimizationruntimechunk](https://webpack.js.org/configuration/optimization/#optimizationruntimechunk) – Grzegorz T. Jan 10 '20 at 08:15
I updated it to "webpack": "^5.0.0-beta.11", however that broke the build, so downgraded to "webpack": "^4.41.5" and followed the post you suggested (which I found it yesterday and I thought I followed it but i was wrong. Things seem to work! I will do another check and if it works I will mark this as accepted :). – Helmut Granda Jan 10 '20 at 16:30
Unfortunately, but webpack 5 is not yet in the production version and many plugins are not adapted to work with it. – Grzegorz T. Jan 10 '20 at 16:32
Right, and sorry I meant to say that I updated to 5 beta knowing the risks and just to try it out. – Helmut Granda Jan 10 '20 at 20:40

score 0 · Answer 2 · answered Jan 10 '20 at 06:23

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/

Thanks @Jeff Tsui, I updated the post to reflect that the setup is not so much the problem but the fact that WebPack wants to include a loader even though the single final output will not have external dependencies. If you look at the source of the final output you will see something like this in the first 100 lines ```/******/ (function(modules) { // webpackBootstrap``` which I do not need. — Helmut Granda, Jan 10 '20 at 07:34
I installed `babel-minify-webpack-plugin`, but your webpack config failed because you missed the plugin of `babel-minify-webpack-plugin` there. — Oo'-, Dec 12 '20 at 23:38

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

2 Answers2