Webpack4系列教程(六) 多页面解决方案

写在前面

在这篇博客中，我将会你介绍多页面解决方案

基本配置

目录结构

代码

module.exports = {
    entry: {
        pageA: './src/pageA.js',
        pageB: './src/pageB.js'
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js',
        path: path.resolve('dist')
    },
    mode: 'development',
    plugins: [
        new CleanPlugin('dist'),
        new HtmlPlugin({
            template: './src/index.html',
            hash: true
        })
    ]
}

打包结果

打开pageA.bundle.js和pageB.bundle.js对比发现，它们都引用了common.js及jquery.js公共文件，且都有一套webpackBootstrap执行代码，这些重复的代码应该打包在一个文件里，然后pageA.bundle.js和pageB.bundle.js引用就好了

splitChunksPlugin && runtimeChunkPlugin

相关配置可参考这篇博客：webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记

optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: 'vendor',
                test: /[\\/]node_modules[\\/]/,
                chunks: 'all',
                priority: 1
            },
            common: {
                name: 'common',
                chunks: 'all',
                minSize: 1,
                minChunks: 2,
                priority: 0
            }
        }
    },
    runtimeChunk: {
        name: 'manifest'
    }
}

打包结果