webpack 从入门到放弃！( 七 ) _webpack中文文档

那如果是 JS 文件，我们将文件内容得到，再通过正则替换的方式移除掉代码中的注释，最后覆盖掉 . 中对应的对象，在覆盖的对象中，我们同样暴露一个方法用来返回新的内容。另外还需要再暴露一个 size 方法，用来返回内容大小，这是内部要求的格式，具体代码如下：
// ./remove-comments-plugin.jsclass RemoveCommentsPlugin {apply (compiler) {compiler.hooks.emit.tap('RemoveCommentsPlugin', compilation => {// compilation => 可以理解为此次打包的上下文for (const name in compilation.assets) {if (name.endsWith('.js')) {const contents = compilation.assets[name].source()const noComments = contents.replace(/\/\*{2,}\/\s?/g, '')compilation.assets[name] = {source: () => noComments,size: () => noComments.length}}}})}}
完成以后回到命令行终端，再次打包，打包完成过后，我们再来看一下 .js，此时 .js 中每行开头的注释就都被移除了。
以上就是我们实现一个移除注释插件的过程，通过这个过程我们了解了：插件都是通过往生命周期的钩子中挂载任务函数实现的。
常用的clean--
每次打包的结果都是直接覆盖到 dist 目录。而在打包之前，dist 目录中就可能已经存入了一些在上一次打包操作时遗留的文件，当我们再次打包时，只能覆盖掉同名文件，而那些已经移除的资源文件就会一直累积在里面，最终导致部署上线时出现多余文件，这显然非常不合理。
更为合理的做法就是在每次完整打包之前，自动清理 dist 目录，这样每次打包过后，dist 目录中就只会存在那些必要的文件。
clean-- 这个插件就很好的实现了这一需求。它是一个第三方的 npm 包，我们需要先通过 npm 安装一下，具体操作如下：
$ npm install clean-webpack-plugin --save-dev
安装过后，我们回到的配置文件中，然后导入 clean-- 插件，这个插件模块导出了一个叫作的成员，我们先把它解构出来，具体代码如下。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
回到配置对象中，添加一个属性，这个属性就是专门用来配置插件的地方，它是一个数组，添加一个插件就是在这个数组中添加一个元素。
绝大多数插件模块导出的都是一个类型，我们这里的也不例外，使用它，就是通过这个类型创建一个实例，放入数组中，具体代码如下：
// ./webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {entry: './src/main.js',output: {filename: 'bundle.js'},plugins: [new CleanWebpackPlugin()]}
完成以后我们来测试一下 clean-- 插件的效果。回到命令行终端，再次运行打包，此时之前的打包结果就不会存在了，dist 目录中存放的就都是我们本次打包的结果。
一般来说，当我们有了某个自动化的需求过后，可以先去找到一个合适的插件，然后安装这个插件，最后将它配置到配置对象的数组中，这个过程唯一有可能不一样的地方就是，有的插件可能需要有一些配置参数。
html--
我们的 HTML 文件一般都是通过硬编码的方式，单独存放在项目根目录下的，这种方式有两个问题：
解决这两个问题最好的办法就是让在打包的同时，自动生成对应的 HTML 文件，让 HTML 文件也参与到整个项目的构建过程。这样的话，在构建过程中，就可以自动将打包的文件引入到页面中。
相比于之前写死 HTML 文件的方式，自动生成 HTML 的优势在于：