inline-manifest-webpack-plugin 插件学习

地址：https://github.com/szrenwei/inline-manifest-webpack-plugin

This is a webpack plugin that inline your manifest.js with a script tag to save http request. Cause webpack's runtime always change between every build, it's better to split the runtime code out for long-term caching.

这是一个Webpack插件，它将manifest.js与脚本标签内联到index.html，以节省http请求。因为webpack的运行时间代码总是在每个构建之间改变，最好将运行时代码拆分出来用于长期缓存。

【在另外的一个插件，说每次构建的时候，webpack的运行时环境都会发生改变，那么就把这个webpack运行时环境代码单独的提取出来。】

Basic Usage

This plugin need to work with HtmlWebpackPlugin v2.10.0 and above: 这里说 inline-manifest-webpack-plugin 这个东西必须和HtmlWebpackPlugin 2.10.0版本以上一起使用。

这个东西使用分为三个步骤，如下：Step1 ，Step2，Step3

Step1: split out the runtime code   拆分运行时代码，提取出manifest
// for explicit vendor chunk config 
  显式供应商chunk配置
[
    new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
    })
]

// or specify which chunk to split manually
或指定要手动拆分的块
[
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['...']
    })
]

Step2: config HtmlWebpackPlugin:    配置 HtmlWebpackPlugin
[
    new HtmlWebpackPlugin({
        template: './index.ejs'
    })
]

Step3: config InlineManifestWebpackPlugin 配置InlineManifestWebpackPlugin • name: default value is webpackManifest, result in htmlWebpackPlugin.files[name], you can specify any other name except manifest, beacuse the name manifest haved been used by HtmlWebpackPlugin for H5 app cache manifest. 名字：默认的值是webpackManifest ，使用 <%= htmlWebpackPlugin.files.webpackManifest %>，这种方式导入，（result in htmlWebpackPlugin.files[name],这句话的意思就是：htmlWebpackPlugin.files.[定义的文件的名字]）你可以指定任意的名字，除了manifest,因为这个manifest名字已经被使用了，被HtmlWebpackPlugin，用于HTML5 应用缓存manifest.

[
    new InlineManifestWebpackPlugin({
        name: 'webpackManifest'
    })
]

<!-- index.ejs -->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>App</title>
</head>
<body>
<%=htmlWebpackPlugin.files.webpackManifest%>
</body>
</html>

Christian-Yang / Translate-and-save

inline-manifest-webpack-plugin 插件学习 #21

Basic Usage