Webpack the correct way to package third-party class libraries

Webpack is becoming more and more widely used, but there are a lot of details that you may not know about, and many people may even think of them as webPack bugs. This time, let’s talk about webpack.optimize.Com monsChunkPlugin. I believe that almost 90% of webpack users use this plugin, but I also believe that almost 90% of webpack users use this plugin incorrectly.

    entry: {
        index: './app/main.jsx',
        vendor: ['react', 'react-dom', 'react-router', 'classnames']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[name].[chunkHash:8].js",
        publicPath: '',
        chunkFilename: "[name].[chunkHash:8].js",
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor'],
        }),
    ]Copy the code

This configuration should be familiar to everyone, right? Package third-party vendors. There’s a problem with writing it this way. What seems to be the problem? Let’s work with this configuration. First, when running, we get vendor.js output after adding the hash value; Then, modify any file in the index entry and compile again to get vendor.js output after adding the hash value; Finally, compare the hash values compiled by Vendor.js twice and you’ll be surprised to find out why the hash values have changed. I did not modify vendor. If the hash value changes, it makes no sense for us to package this vendor. I won’t tell you why this is a problem, but for those who want to know, take a look at the underbelly of Webpack. Here, I’m just throwing out a solution:

    entry: {
        index: './app/main.jsx',
        vendor: ['react', 'react-dom', 'react-router', 'classnames']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[name].[chunkHash:8].js",
        publicPath: '',
        chunkFilename: "[name].[chunkHash:8].js",
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
        }),
    ]Copy the code

Yes, this is the configuration above, simply adding ‘manifest’. Doing our previous tests again, you’ll notice that there’s an extra manifest.js, but the vendor hash value doesn’t change. I’ll see you in the river’s lake.