内联webpack运行时代码inline-manifest-webpack-plugin

[hfc-advance]

runtimeChunk

分离出webpack编译运行时的代码，也就是我们先前称为manifest的代码块，好处是方便我们做文件的持久化缓存。它可以设置多种类型的值，具体可以看这里，其中single即将所有chunk的运行代码打包到一个文件中，multiple就是给每一个chunk的运行代码打包一个文件。

我们可以配合InlineManifestWebpackPlugin插件将运行代码直接插入html文件中，因为这段代码非常少，这样做可以避免一次请求的开销，但是新版插件的配置和之前有些不太一样，接下来详细讲解一下如何配置。

var HtmlWebpackPlugin = require('html-webpack-plugin')
var InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')

module.exports = {
  entry: {
    app: 'src/index.js'
  },
  optimization: {
    runtimeChunk: 'single'
    // 等价于
    // runtimeChunk: {
    //   name: 'runtime'
    // }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'fle-cli',
      filename: 'index.html',
      template: 'xxx',
      inject: true,
      chunks: ['runtime', 'app'], // 将runtime插入html中
      chunksSortMode: 'dependency',
      minify: {/* */}
    }),
    new InlineManifestWebpackPlugin('runtime')
  ]
}

这段配置会产生一个叫做runtime的代码块，和老版本不同的是，我们并不需要在html模版中添加<%= htmlWebpackPlugin.files.webpackManifest %>，只需将runtime加入chunks即可。这里有一个点要注意，InlineManifestWebpackPlugin插件的顺序一定要在HtmlWebpackPlugin之后，否则会导致编译失败。