一、前言
上一篇讲到如何处理静态资源，本篇将更进一步，介绍如何打造一个基础而不失效率的开发环境。
关键词：HtmlWebpackPlugin、Source Map、Dev Server、Hot Module Replacement。
二、Plugins - 快捷打包
如果说，Loader 的作用是将不同的资源进行转换，那么 Plugin 则是在打包的过程中帮我们做一些事情，使打包过程更好管理。
在之前的打包流程中，实际上存在两个问题。
第一，我们是不可以随意删除输出文件夹（我设置的是 dist）下的 index.html 的，打包后的文件以此为 html 模板。
第二，当我们改变输出文件名称时，打包后的新文件与之前没有改名前的旧文件并存。
为了快捷打包，我们需要解决这两个问题。
a) HtmlWebpackPlugin
第一个问题的解决办法就是让 index.html 自动生成。而 HtmlWebpackPlugin 这个插件就是干这个的，它会在打包完成后，在输出目录中自动生成一个 index.html 文件。
在安装插件前，需要在 src 下编写一个 index.html ，以此作为后续打包的模板。
src/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>my webpack demo</title> </head> <body> <div id="root"></div> </body> </html>
安装插件：
npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", // 这里设置自己模板文件 }), ], };
b) CleanWebpackPlugin
第二个问题的解决办法是在打包之前清除输出目录中的内容，然后让它重新生成。CleanWebpackPlugin 插件虽然不是官方的，但是在 5.20.0 之前的版本中仍然值得推荐。
它的 github 地址如下：github.com/johnagan/cl…
安装插件：
npm install --save-dev clean-webpack-plugin
webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { // ... plugins: [ new CleanWebpackPlugin(), // 在打包之前，清除输入目录下的文件 new HtmlWebpackPlugin({ template: "./src/index.html", // 这里设置自己模板文件 }), ], };
c) output.clean
还有一个更加方便的方法：在 webpack 5.20.0+ 的版本中，内置了清除输出目录内容的功能，只要在 output 选项中配置一个参数即可。
webpack.config.js
module.exports = { //... output: { clean: true, // Clean the output directory before emit. }, };
三、Devtool
现在尝试写一个错误的语法，然后打包。
consele.log(123)
虽然写了错误的语法，但是打包仍然会成功，接着在浏览器打开打包好的 index.html，控制台中就会出现报错。
当你点击右侧的index.js:79时，就会跳转到出错的位置。
但这个位置会和我们的正常逻辑不同，它会指引你到打包文件中的出错位置，而不是你的业务代码出错的位置。
显然，我们作为开发者希望看到的是业务代码中的位置。
这时，就需要用到 devtool 这个选项了。它可以在代码出错时，映射到业务代码出错的位置上。
在不同的环境中，配置是不同的。
1. 开发环境中的 source map
webpack.config.js
module.exports = { mode: 'development', devtool: 'eval-cheap-module-source-map' // development }
2. 生产环境中的 source map
module.exports = { mode: 'production', devtool: 'nosources-source-map', // production }
