npx＝>0配置，webpack4.0＋

愿你能遇到一个城市，容得下你尽情嬉闹。

前言

webpack是非常流行的模块打包工具，而且现在有webpack配置工程师这一职业，随着webpack版本的更新，从webpack3.0到webpack4.0+迁移项目会有很多坑，当然今天不是聊这些坑的，今天主要是重新温习一下webpack配置以及一些功能。

webpack是什么

webpack主要功能就是分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

主要功能包括：

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。

文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。

代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。

模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。

自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。

代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

npx是什么

webpack4.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中我们可以配置scripts来指定运行指令，我们通过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文件。在配置文件中配置plugins;

html-webpack-plugin接受一个对象options。 常用的配置参数有template（模板路劲）、title（html中title标签需采用ejs写法）、minify（压缩方法）、hash（清除缓冲，我们也可以通过在output中设置build.[hash:8].js）。

3、清理打包文件、配置多入口和多页。

每次打包都会生成build文件，当我们再一次打包就会报错，所以我们需要引入clean-webpack-plugin来清理build文件。

entry可以是一个数组，可以在生成的html中引入两个js文件。同时entry也可以是一个对象，但是要生成多页面我们还需要再 new一个HtmWebpackPlugin，它需要添加一个属性chunks，表示引入的js。还需要注意的一点就是我们需要把输出文件output的filename设置成[name]。否则就会报错。

4、解析、抽离css文件，分离多个css文件

打包css文件，我们会用到style-loader（解析css，变成style标签插进html）、css-loader（把css变成一个模块，插到style便签）、less-loader、less、stylus、stylus-loader、node-sass、sass-loader等等。

抽离css文件，通过link的方式引入。我们会用到extract-text-webpack-plugin@next，新版本加了一个@next，是比较稳定的；webpack还新提供了一个mini-css-extract-plugin，这个插件有望取代extract-text-webpack-plugin。但是目前还不稳定。

下载好以后，我们在plugins中添加插件，配置filename（抽离的css文件名），在loader中修改use；

如果不想打包到一个css文件中，我们可以分离它，我们可以分3步，①、分别new一个实例；②、在module中分别配置相对应的插件；③、在plugins中引入。打包之后我们就会看到css下就会有两个css文件。

但同样它会出现一个问题，就是在不会热更新了，上面是上线环境用的，开发环境我们需要重新配置，只需要两步，这样他就不会以link的方式，而是以style的方式插入html中。

上面说的是 extract-text-webpack-plugin@next，而 mini-css-extract-plugin的用法简单，但是它的缺点就是不能分离打包。只能打包成一个css文件。

它的用法与上面不同的是，只需在use中添加一个MiniCssTractPlugin.loader；

5、清除没用的css。

如果我们引入框架的样式库，比如bootstrap、mui等等UI库，会用很多用不到样式，我们可以用purifycss-webpack 、purify-css、glob插件去清除；用法也简单。一般情况下，我们放在HtmlWebpackPlugin后面。

6、原封不动的发布一个文件到线上，拷贝插件；

如果我们有这样的需求，我们想要把一个文件原封不动的拷贝到打包的build文件中，我们会用到copy-webpack-plugin插件，它接受一个数组，可以拷贝多个文件或文件夹，数组中是多个对象，对象中常用的参数有from和to。

结语