愿你遇见一座可以让你自由玩耍的城市。
前言
webpack是一个非常流行的模块打包工具，现在出现了webpack配置工程师这个职业。 随着webpack版本的更新，项目从webpack3.0迁移到webpack4.0+会遇到很多坑。 当然，明天我们不会谈论这样的陷阱。 ，今天主要是重温一下webpack的配置和一些功能。
什么是网页包
webpack的主要功能是分析你的项目结构，找到浏览器无法直接运行的JavaScript模块和其他扩展语言（Scss、TypeScript等），并将其打包成适合浏览器使用的格式。
主要特点包括：
代码转换：TypeScript 编译为 JavaScript、SCSS 编译为 CSS 等。
文件优化：压缩JavaScript、CSS、HTML代码、压缩合并图像等。
代码拆分：提取多个页面的公共代码，提取首屏不需要执行的代码，让其异步加载。
模块合并：一个模块化项目中会有很多模块和文件，需要创建一个函数将模块分类并合并到一个文件中。
自动刷新：监控本地源代码更改，自动重新构建并刷新浏览器。
代码校准：代码提交仓库之前，需要校准代码是否符合规范、单元测试是否通过。
自动发布：代码更新后，自动创建在线发布代码并传输至发布系统。
什么是 npx
webpack 4.0+及以上推荐0配置，并且webpack还在朝这个方向发展。 webpack4.0+添加了webpack-cli；
npx 是执行 npm 包的二进制文件。 一般来说，它可以执行npm的一些指令，例如npx webpack。 它会执行node_modules下bin下的webpack.cmd文件。 如果没有安装webpack，则会手动安装。 。 但node版本不高于8.6，npm版本不高于5.2。
npx 可以通过 npm 下载。 webpack提到的0配置和他有关。 当然，npx还有很多功能。 你可以在npm官网查看npx。
webpack主要配置
webpack的零配置是执行的默认配置，功能很差，这也导致很多人从来没有听说过npx。 一般来说，我们需要自己配置webpack。
webpack的主要配置包括entry、output、devServer、module、plugins、mode、resolve。
1、开发服务器如何配置？
需要安装 webpack-dev-server。
在package.json中我们可以配置脚本来指定运行指令，我们通过npm run start来运行这个文件。 服务器配置会将我们打包好的build.js放到显存中，也就是说我们在文件目录下是看不到build.js的。 只有当我们 npm run build 时才能看到它。
contentBase是配置服务器运行的根目录，默认是/，我们可以指定，比如我们在build文件夹下构建a.json，我们就可以在浏览器下打开a.json；
port 是端口号；
compress 是服务器卷压缩；
open是手动打开浏览器；
hot是热更新。
2.将html打包到build中，并手动导入生成的js。
html-webpack-plugin 会为我们做这件事，我们只需要在 src 下构建一个 html 文件即可。 在配置文件中配置插件；
html-webpack-plugin 接受对象选项。 常用的配置参数有template（模板路径）、title（html中的标题标签需要用ejs写）、minify（压缩方式）、hash（清除缓冲区，我们还可以在output中设置build.[hash:8]。 js）。
3、清理打包文件，配置多条目、多页面。
每次打包都会生成一个构建文件，再次打包就会报错，所以需要引入clean-webpack-plugin来清除构建文件。
入口可以是一个链表，生成的html中可以引入两个js文件。 同时entry也可以是一个对象，但是要生成多个页面，我们需要添加一个新的HtmWebpackPlugin，它需要添加一个属性chunks来表示导入的js。 还有一点需要注意的是，我们需要将输出文件output的文件名设置为[name]。 否则会报错。
4.解析并提取css文件，分离多个css文件
为了打包css文件，我们将使用style-loader（解析css，将其转换为样式标签并将其插入到html中），css-loader（将css制作为模块，将其插入样式注释），less-loader， less、stylus、stylus-loader、node-sass、sass-loader 等。
提取css文件并以链接的形式导入。 我们会使用extract-text-webpack-plugin@next，新版本增加了一个@next，比较稳定； webpack 还提供了一个新的 mini-css-extract-plugin，预计它将取代 extract-text-webpack -plugins。 但还不稳定。
下载完后，我们在plugins中添加插件，配置filename（提取出来的css文件名），在loader中更改use；
如果不想打包成css文件，我们可以将其分开。 我们可以分为3步，①、创建一个新实例； ②、分别在模块中配置相应的插件； ③、在插件中引入它们。 打包后我们会看到css下面会有两个css文件。
但它也会有一个问题，那就是不会热更新。 以上是针对线上环境的。 我们需要重新配置开发环境。 只需要两步，这样就不会以链接的形式，而是以style Form的形式插入到html中了。
上面是extract-text-webpack-plugin@next，mini-css-extract-plugin的用法很简单，但它的缺点是不能分离打包。 只能打包成css文件。
它的用法和前面的不一样，只是在使用时添加一个MiniCssTractPlugin.loader；
5.清除无用的css。
如果我们引入框架的样式库webpack 零配置，比如bootstrap、mui等UI库，我们会用到很多未使用的样式。 我们可以使用purifycss-webpack、purify-css、glob插件来进行清理； 使用方法也很简单。 通常，我们将其放在 HtmlWebpackPlugin 旁边。
6、原样发布文件到线上并复制插件；
如果我们有这样的需求webpack 零配置，我们想要将一个文件原封不动的复制到打包好的构建文件中，我们就会使用copy-webpack-plugin插件，该插件接受一个链表，可以复制多个文件或者文件夹，有多个对象数组中，对象中常用的参数是from和to。
结语
