Webpack实用小芝士（核心理论 ＜ 实战代码）

Webpack是什么

Webpack是一种前端资源构建工具，一个静态模块打包器（module bundle）
在Webpack看来，前端的所有资源文件（js/json/img/less/....）都会作为模块处理
它将根据模块的依赖进行静态分析，打包生成对应的静态资源

Webpack五个核心概念

1、Entry
入口提示Webpack一那个文件为入口起点开始打包，分析构建内部依赖图
2、output
输出指示Webpack打包后的资源bundles输出到哪里去，以及如何命名
3、loader
loader让Webpack能够去处理那些非js文件（webpack自身只能理解js）
4、plugins
插件可以用于执行范围更广的任务，插件的范围包括，从打包和压缩，一直到重新定义环境中的变量符
5、mode

webpack构建流程

确定入口：根据配置中的entry找到所有入口文件
编译模块：从入口文件开始，调用所有配置的loader对模块进行翻译，然后递归所有依赖的模块，重复编译，得到每个模块翻译后的最终内容以及它们之间的依赖关系。
输出资源：根据入口和模块的依赖关系，组装成一个个包含多个模块的chunk，然后将chunk转换成一个单独的文件加入输出列表
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统上。

有哪些常用的loader

image-loader：加载并且压缩图片文件

babel-loader：把ES6转换成ES5

css-loader：加载CSS，支持模块化，压缩，文件导入等特性；css-loader 是解释 `@import` 和 `url()`

style-loader：把CSS代码注入到JS中，通过DOM操作去加载CSS，最终是以style标签的形式嵌入到Html代码中

eslint-loader：通过ESLint检查JS代码

file-loader：把文件移动到输出文件夹中，在代码中通过相对URL区引用输出的文件

url-loader：和file-loader类似，通过设置limit能在文件很小的情况下以base64的方式把文件内容注入到代码中去，主要是用于处理css中的url()

html-loader:处理html中的图片,注意的是：url-loader使用的是es6解析模块，html-loader使用的是es5解析模块，需要将esModule:false

source-map-loader：加载额外的Source map文件，方便断点调试

postcss-loader：css兼容性处理，另外要搭配 postcss-preset-env

有哪些常见的Plugin？他们是解决什么问题的？

define-plugin：定义环境变量
commons-chunk-plugin：提取公共代码
uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
MiniCssExtractPlugin：提取js中的css成单独文件  （注：需要再use中使用MiniCssExtractPlugin。loader）
HtmlWebpackPlugin：默认会一个空的HTML，自动引入打包输出的所有资源，通过配置template的文件路径，可以将文件内容进行复制
OptimizeCssAssetsWebpackPlugin：压缩css

压缩CSS

optimize-css-assets-webpack-plugin
用法：引入插件，使用插件new OptimizeCssAssetsWebpackPlugin()

压缩Html

plugins:[
        new HtmlWebpackPlugin({
   
            template:'./index.html',
            //压缩处理
            minify:{
   
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }    
        }),

    ],

压缩JS

//为什么要使用 ParallelUglifyPlugin
//webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。

//当webpack有多个JS文件需要输出和压缩时候，原来会使用UglifyJS去一个个压缩并且输出，但是ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。

npm i -D webpack-parallel-uglify-plugin
{
   
	plugins: [    
		new ParallelUglifyPlugin({
   
		  cacheDir: '.cache/',
		  uglifyJS:{
   
			output: {
   
			  comments: false
			},
			warnings: false,
			compress: {
   
			  drop_debugger: true,
			  drop_console: true
			}
		  }
		}),
	],
}

webpack-parallel-uglify-plugin配置参数说明
test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/.
include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
cacheDir: 缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，cacheDir 用于配置缓存存放的目录路径。默认不会缓存，想开启缓存请设置一个目录路径。
workerCount：开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。
sourceMap：是否为压缩后的代码生成对应的Source Map, 默认不生成，开启后耗时会大大增加，一般不会将压缩后的代码的
sourceMap发送给网站用户的浏览器。
uglifyJS：用于压缩 ES5 代码时的配置，Object 类型，直接透传给 UglifyJS 的参数。
uglifyES：用于压缩 ES6 代码时的配置，Object 类型，直接透传给 UglifyES 的参数。

eslint-loader用法（webpack<V5.0）

首先需要安装
npm i eslint eslint-loader eslint-plugin-import eslint-config-airbnb-base -D

//语法检查eslint-loader eslint，检测规则在package.json的eslintConfig中
            {
   
                test:/\.js$/,
                exclude:/node_modules/, //只检查自己的源代码，不检查别人的源代码
                loader:'eslint-loader',
                options:{
   
                    fix