Question

我试图以......的方式配置代码分割。

不包括所有输出文件中的webpack运行时
对于webpack运行时不需要额外的common.chunks.js文件
允许我指定包含webpack运行时的输出文件。

在我的具体示例中，我有一个header.js文件，需要在页面的其余部分加载之前运行。我想指定此文件中存在哪些模块，以及webpack运行时。

我有一个bundle.js文件，这是我应用的大部分代码。由于webpack运行时将加载到header.js，我希望确保它不包含在bundle.js

中

我的切入点看起来像这样

entry: {
    header: './src/js/doStuffInHeader.js', //<-- I need webpack in here
    bundle: './src/js/main.js'             //<-- not in here
},

webpack文档说，

条目块
  条目块包含运行时和一堆模块。如果块包含模块0，则运行时执行它。如果没有，它等待包含模块0的块并执行它（每次存在具有模块0的块时）。

普通块
  普通块不包含运行时。它只包含一堆模块。结构取决于块加载算法。 I. e。对于jsonp，模块包装在jsonp回调函数中。块还包含它实现的块ID列表。

但是没有关于如何在webpack配置中区分普通块和条目块的任何说明。

Answer 1

我相信你可以使用带有多个入口点的Commons Chunk插件来指定你的块。

var webpack = require("webpack");
module.exports = {
  entry: { a: "./a", b: "./b" },
  output: { filename: "[name].js" },
  plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ]
}

所以init.js是一个只包含运行时的文件（即header.js）

Answer 2

您可以使用CommonsChunkPlugin指定包含webpack运行时代码的条目。例如，对于app，vendor和polyfill条目，它可能如下所示：

  new webpack.optimize.CommonsChunkPlugin({
    filename: '[name].bundle.js',
    names: [ 'app', 'vendor', 'polyfill', 'webpack' ]
  });

姓氏（此处为webpack）将成为包含webpack运行时的条目。

指定webpack运行时应该在

2 个答案: