webpack4【guides说明4】

如何对webpack的输出进行管理

 

目前，我们已经手动地在我们的index.html中包含进了一些资源，但是随着项目增长又或者你想要在文件名中使用hash，以及你想要输出多个“包”文件时，手动维护index.html就会变得很困难。然而webpack的一些插件可以让这些事情变得很轻松。

 

本次项目目录设定如下，删除了多余的资源文件

 

最后调整下webpack.config.js，这样子我们就支持了输出了多个打包文件，以及如何命名产生的打包文件

在这里我插入一些小小的测试改动

多个entry，output.filename写成一定的文件名形式。打包看看

报错：多chunk生成同一个main.js文件。按文档改了后，打包就通过了

 

再试着改动如下

entry项里面的地址不是以“.”开头的话，就提示无法解析了，这是个小坑啊。

 

看看打包成功后的dist目录结构吧

原来的打包文件main.js以及先生成的两打包文件 app.bundle.js和print.bundle.js，同在一个目录下了。这也是一个问题，另外我们之前是在index.html中手动引入两打包后产生的文件，总不可能我们每次更改输出包文件名后，自己再手动去更新index.html里面的相关引用了吧，webpack也提供了相关解决的插——

html-webpack-plugin

安装好html-webpack-plugin并修改配置以支持html-webpack-plugin

 

在我们打包之前，应该知道HtmlWebpackPlugin 默认会生成自己的index.html文件，即使我们已经在dist/目录下有了一个。这意味着生成的index.html会替换掉我们的index.html。

打包结果如下，3新生成的文件

如果你想要自己去控制HtmlWebpackPlugin的行为以及新生成的index.html内容（或者说是模板），你可以参考一下 HtmlWebpackPlugin 和html-webpack-template 。

 

目前我们解决了手动引入打包后脚本的问题，还有一个如何清除之前遗留文件的问题。

webpack也提供了解决此问题的插件

npm install --save-dev clean-webpack-plugin

 安装，修改webpack.config.js文件增加对插件的支持

注意，此处plugins内，经试验，HtmlWebpackPlugin和CleanWebpackPlugin顺序无关，以及CleanWebpackPlugin更多使用，请见先关文档说明。

npm打包后，之前遗留的main.js文件没了，就只有本次打包后产生的文件了。

扔个彩蛋

你也许对webpack和它的插件们是如何知道要生成什么文件的这个问题感到奇怪。答案在于 清单文件（webpack用来记录 模块是如何映射到输出文件去的），如果你对webpack是怎么管理输出，清单文件是个很好的切入点。