Migrating from webpack 2 to webpack 4

Refresh

2 weeks ago

Views

3 time

0

I'm trying to migrate a project I'm working on from webpack 2.4.1 to the most recent version 4.29.3. (A much needed upgrade, I know)

I think I have converted everything correctly, from replacing extract-text-webpack-plugin to mini-css-extract-plugin, etc.

The problem occured when I tried to replace the CommonsChunkPlugin with the splitChunks plugin. Whenever I try to build my project with the webpack-dev-server it takes about 10 minutes. It used to take less than a minute with the CommonsChunkPlugin.

I'll be honest and I only recently started working with webpack, so I barely know what I'm doing in the configuration.

Old configuration:

module.exports = {
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
},

resolve: {
    extensions: ['.js', '.ts', '.css']
},

module: {
    // Too much to paste here
}

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),

    new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('src'), {}
    ),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
    })
]

To the config I'm at now (I'll only paste the plugins section, since the rest is the same):

plugins: [
    new BundleAnalyzerPlugin(),

    new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),

    new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('src'), {}
    ),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
    })
],
optimization: {
    splitChunks: {
        cacheGroups: {
            polyfills: {
              test: 'polyfills',
              chunks: 'all',
              enforce: true
            },
            vendor: {
              test: 'vendor',
              chunks: 'all',
              enforce: true
            },
            app: {
                test: 'app',
                chunks: 'all',
                enforce: true
              },
            vendors: false, 
            default: false
          }
    }
}

I assume it's something to do with the optimization part, but once again I'm not comfortable in this area. Is there something I'm missing?

0 answers