给 a/b/c 页面配置 html 模版，使用相同模版，根文件下的 html 文件

配置多路口-多页面应用

entry : {

    main:

    a:

    b:

    c:

}

上线地址 output.publicPath

在html中所引用的js路径 被替换为以publicPath开头的绝对路径

上线前压缩html文件 plugins->htmlWebpackPlugin->minify(很多参数)

https://github.com/kangax/html-minifier#options-quick-reference

minify: {

removeComments: true, // 删除注释

collapseWhitespace: true // 删除空格

}

在自定义的 html 模版文件中使用 ejs 自定义了引用输出 js 的地方（在head或body引入类似：<script src='<%= htmlWebpackPlugin.files.chunks.main.entry %>'></script>）

因此需要将 inject 设置为 false（默认为 true），避免打包资源的引入混乱

安装babel插件的命令是npm install --save-dev babel-loader babel-core

代码分割

通过自定义 html 模版，根据 htmlWebpackPlugin.files.chunks.(filename).entry 自定义输出模块的插入地方（head/body）

htmlWebpackPlugin.files 输出 chunks需要打包的模块（main/a） css输出的样式文件数组 js输出的脚本文件数组；

其中 chunks 中的 模块 .entry 属性，可以获取输出的文件路径

遍历 htmlWebpackPlugin -> files、options

遍历 htmlWebpackPlugin.files、htmlWebpackPlugin.options

可能值是对象/数组 JSON.stringify

new htmlWebpackPlugin({
	filename: 'index.html',
	template: 'index.html',
	inject: 'head',
	title: 'webpack is cool~',
	date: new Date()
})

webpack 配置文件：添加 title: 'webpack is cool'

自定义 html 模版文件：使用 ejs 模版

<% 'Scriptlet' tag, for control-flow, no output

<% %> 控制流

<%= Outputs the value into the template (HTML escaped)

<%= %> 转义输出

<%= htmlWebpackPlugins.options.title %>  title 定义在 option 之下

老师演示的 webpack 版本 1.13.2

npm i webpack@1.13.2 -D

filename，inject

https://github.com/jantimon/html-webpack-plugin#configuration

filename: 设置 htmlWebpackPlugin 输出 html 文件的文件名，可以使用占位符 [hash]

reject: 设置打包 js 文件注射的位置，默认插入到 body 最后，设为 head 则插入到 head 最后

new htmlWebpackPlugin({
	filename: 'index-[hash].html',
	template: 'index.html'
	inject: 'head'
})

<div class="line number1 index0 alt2" ><code class="js plain" >output: {</code></div><div class="line number2 index1 alt1" ><code class="js spaces" >    </code><code class="js plain" >path: (</code><code class="js string" >'./dist/js'</code><code class="js plain" >),</code></div><div class="line number3 index2 alt2" ><code class="js spaces" >    </code><code class="js plain" >filename: </code><code class="js string" >'[name]-[chunkhash].js'</code></div><div class="line number4 index3 alt1" ><code class="js plain" >}</code></div><p>之前的设置，htmlwebpackplugin 会将生成的 html 文件也保存在 dist/js 下，不合适</p><div class="line number1 index0 alt2" ><code class="js plain" >output: {</code></div><div class="line number2 index1 alt1" ><code class="js spaces" >    </code><code class="js plain" >path: (</code><code class="js string" >'./dist'</code><code class="js plain" >),</code></div><div class="line number3 index2 alt2" ><code class="js spaces" >    </code><code class="js plain" >filename: </code><code class="js string" >'js/[name]-[chunkhash].js'</code></div><p ><code class="js plain" >}</code></p><p ><code class="js plain" ><span>修改为如上，将 filename 中添加 js 路径，删去 path 下的 js，这样 html 文件会生成在 dist 目录下，js 文件生成在 dist/js 目录下</span></code></p>

new htmlWebpackPlugin({
    template: 'index.html'
})

webpack 输出的 index.html 文件以当前配置文件目录下的 index.html 为模版插入打包好的资源

关于路径 和运行上下文 context 属性相关，解析入口文件 entry 和 loaders 的路径，需要设为绝对路径，默认为当前配置文件下的目录。推荐设置。

The base directory, an absolute path, for resolving entry points and loaders from configuration.

context: path.resolve(__dirname, "app")

By default the current directory is used, but it's recommended to pass a value in your configuration. This makes your configuration independent from CWD (current working directory).

plugins: [
    new htmlWebpackPlugin()
]

默认在 output.path 目录下生成一个 index.html 的h5文件，该文件将打包好的 js 文件在 body 下通过 script 标签引入

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. 

If you have any CSS assets in webpack's output (for example, CSS extracted with the ExtractTextPlugin) then these will be included with <link> tags in the HTML head.

https://github.com/jantimon/html-webpack-plugin#configuration

但此时和根目录下自己写的 html 文件毫无关联，不符合项目需求...  需要以自己写的 html 文件为模版，引入打包文件