Webpack build configuration

Question

I've created git repo with simple example of my project https://github.com/paveleremin/webpack-build

The question is: how to build it with multiple chunks, like:

1. components (all js files from /app/components/ folder that used in two or more modules)
2. vendors (all js files from /node_modules/ and /app/vendor/ folders that used in two or more modules)
3. manifest (webpack js code, babel-polifill etc)
4. per module js files

Right now build had a problems with:

new webpack.optimize.CommonsChunkPlugin({
    async: 'components',
    children: true,
    minChunks({ resource }, count) {
        return resource && resource.includes(paths.components) && count > 1;
    }
}),

new webpack.optimize.CommonsChunkPlugin({
    async: 'vendors',
    children: true,
    minChunks({ resource }, count) {
        console.log(resource, count);
        return resource && (resource.includes(paths.nodeModules) || resource.includes(paths.vendor)) && count > 1;
    }
}),

new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
}),

1. source of scUsedTwice is copy-paste and exists in login.js and dashboard.js as well - SOLVED
2. all vendors are in app.js

I've tried do it myself, but have a problem with async modules .

Answer 1

There are a lot of questions in here!

I'll answer the vendor and manifest questions since they're related.

There are multilple ways of doing this depending on how you dev, how frequent the flies are likely to change and what is highest priority for you (build time?).

You could use a 'dll' ( https://webpack.js.org/plugins/dll-plugin/ ) which is good for when you know the exactly what files you want to go into the vendor/dll bundle and you know the vendor files will rarely change. This method has a super fast build time as it only builds it once / when needed.

The way i have done it by explicitly having a 'vendor.js' file which includes my known 3rd party packages. I then setup webpack to treat this file differently. The benefit of this is the vendor file is more explicit and easier to update, but the build will be slightly slower.

  entry: {
    app: [`${SRC}/client-entry.js`],
    vendor: [`${SRC}/vendor.js`]
  }
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'], minChunks: Infinity }),
  ]

To create a Manifest, the method is similar to the above. You need to also use the common chunks plugin and add:

   new webpack.optimize.CommonsChunkPlugin({ name: "manifest", minChunks: Infinity }

The best source i've found, if you've time to go through it is : https://survivejs.com/webpack/optimizing/separating-manifest/

May I suggest posting you async and copy-paster problem in a separate question?