webpack学习（二）：clean-webpack-plugin插件和source map功能

版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/weixin_40184174/article/details/85119240

clean-webpack-plugin插件

what？

clean-webpack-plugin插件：一个webpack插件，用于在构建之前删除/清除构建文件夹。也就是说我们在安装使用这个插件之后，我们每次run build会自动帮我们清除之前的文件，再用打包生成的新的文件代替

why？

可能有人会说，每次打包完的文件如果同名不是会覆盖吗？那这个插件到底有什么意义？
的确如此，我们只要定好文件的命名，每次打包之后产生的文件便会自动覆盖之前的文件，但是在后续的开发过程中，我们不可能每个文件都定死名称，可能会在文件命名中添加hash值，或者说添加版本号等信息来进行迭代，此时，旧的文件没有清除，会造成无用文件的积累。而每当这个时候我们要去手动删除十分不便，因此我们可以使用该插件来帮我们完成这些。

use？

1、首先是通过npm安装，命令如下：

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

2、在webpack配置文件中导入，然后再plugins中定义

const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
new CleanWebpackPlugin(['build']) //设置清除的目录
]

注意，括号中的文件名为要清除的目录名，如需要设置路径，可以参考如下：

plugins: [
new CleanWebpackPlugin(['build'], {
root: path.resolve(__dirname, '..'),
})
]

3、运行npm run build，可以看到提示如下：

也能观察到，原来的打包文件被自动删除了，说明插件开始工作

source map功能

why？

我们在打包完文件之后运行项目文件，此时如果存在错误（比如在源文件 main.js 出现了一个错误），那么它只会跟踪到打包完的 bundle.js 上，对于我们找说，如此跟踪错误来源毫无帮助。因此我们可以使用 JavaScript 自带的 source map 功能帮助我们追踪错误的位置

use?

该功能的使用非常简单，只需要我们定义devtool即可，如下：

mode: 'production',
devtool: 'cheap-source-map'

mode: 'development'
devtool:  'inline-source-map'

值得注意的是，不同mode下应该使用不同的devtool
定义完成之后，我们可以重新编译打包，当我们源代码存在错误时，可以发现浏览器开发者工具可以追踪到源文件以及相应错误位置，而没有使用source map，只会追踪到打包生成的文件中