如何从 Webpack 中的 splitChunks 中分离出 webpack-dev-server？答案

【问题标题】：How to separate out webpack-dev-server from my splitChunks in Webpack?如何从 Webpack 中的 splitChunks 中分离出 webpack-dev-server？
【发布时间】：2018-09-24 22:15:54
【问题描述】：

我正在尝试让多个入口点与 webpackDevServer 一起工作。

一个入口点需要我的整个 node_modules 文件夹。另一个只需要一个文件，其中包含一个 console.log（入口点文件）。

由于某种原因，我的带有单个 console.log 的单个文件将无法运行。 See this question as well.

我在 WebpackDevServer 中测试这个设置，所以我怀疑所有文件至少需要 WebpackDevServer 才能运行，也许。所以，我把我的optimization.splitChunks改成这样based off the example on the webpack docs：

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all'
            },
            vendor: {
                test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
                name: 'webpack',
                chunks: 'all',
            }
        }
    },
},

我希望会有一个“供应商”包和一个“webpack”包。只有“供应商”（和我的入口点）：

                                         app.js   6.92 MiB            app  [emitted]  app
                               resetPassword.js   35.2 KiB  resetPassword  [emitted]  resetPassword
                                      vendor.js   14.4 MiB         vendor  [emitted]  vendor

我怎样才能将webpack-dev-server 放入它自己的包中，然后我可以将其包含到 HtmlWebpackPlugin 中，以测试它（或其他 node_modules）是否是运行我的console.log 所需要的?

Webpack 配置

module.exports = {
    entry: {
        app: './public/js/ide.js',
        resetPassword: './public/js/reset_password.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: '/'
    },
    ...
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all'
            },
            vendor: {
                test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
                name: 'webpack',
                chunks: 'all',
            }
        }
    },
},
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/html/ide.html',
            inject: true,
            chunks: ['app', 'vendor']
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password.html',
            template: 'public/html/reset_password.html',
            inject: true,
            chunks: ['resetPassword'] // this does not work
            //chunks: ['resetPassword', 'vendor'] //this works
        }),
    ],
}

reset_password.js

console.log('hello')

webpack 开发服务器配置

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST,
    port: PORT,
    open: config.dev.autoOpenBrowser,
    overlay: false,
    publicPath: '/',
    contentBase: [
        path.join(__dirname, "../../public"), 
        path.join(__dirname, "../../public/js")],
    watchOptions: {
        poll: config.dev.poll,
    },
    disableHostCheck: true,
    https: true,
    noInfo: false,
},

【问题讨论】：

标签： javascript webpack webpack-dev-server html-webpack-plugin

【解决方案1】：

为每个块添加优先级属性。来自docs。

splitChunks.cacheGroups.priority

号码

一个模块可以属于多个缓存组。优化将优先选择具有更高优先级的缓存组。默认组具有负优先级，以允许自定义组具有更高的优先级（自定义组的默认值为 0）。

所以你的代码会是这样的。注意优先级是最高的数值，不是排名值。

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
        priority: 1
      },
      vendor: {
        test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
        name: 'webpack',
        chunks: 'all',
        priority: 2
      }
    }
  },
},

【讨论】：