使用 WebPack 和 Babel 组合、缩小并转换为 ES5

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.

Answer 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 .

Answer 2

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/