webpack 学习笔记

一、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程

1、初始化项目，初始化参数：根据用户配置的不同参数
2、初始化参数，根据用户在命令窗输入的参数，以及 webpack.config.js 的配置，得到最后的配置
3、开始编译，根据上一步得到的最后的配置参数，初始化得到一个 compiler 对象，注册所有的插件 plugin ,插件开始监听 webpack 的构建过 程，
不同的环节会对应相应的处理然后开始执行编译。
3、确定入口，根据 webpack.config.js 中的 entry 入口，开始解析文件构建 AST 语法树，找出依赖递归下去。
4、编译模块，在递归过程中，根据文件类型和 loader 配置，调用相应的 loader 对不同的文件进行不同的转换处理。再找出该模块依赖的模块，
直到项目中依赖的所有模块都经历过编译处理
5、完成编译并输出、递归结束后，得到每个文件结果，包含转换后的模块及他们之间的依赖关系，根据 entry 以及 output 等配置生成代码块，
会在结束之前清楚 dist 目录。
6、打包完成、根据 output 输出到指定目录。

2、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。

一、Loader 直译为 “加载器”，主要是用来解析和检测对应资源，负责源文件从输入到输出的转换，他专注于实现资源模块的加载。
将一些浏览器不支持或者兼容有问题的代码，处理为浏览器可以支持的资源。如：将 ES6+ 转换为浏览器可以识别的 ES5、Sass 转换为 css。
1、通过 moudule.exports 导出一个函数
2、该函数默认参数 第一个参数 source （即要处理的资源文件）
3、在函数体中处理资源（Loder 里配置响应的 Loder 后）
4、通过 return 返回最后打包的结果（这里返回的结果需要为字符串格式）

二、Plugin 主要在 webpack 构建的不同阶段执行一些额外的工作，比如拷贝静态资源、清空打包后的文件夹等。
1、通过钩子机制实现
2、插件必须是一个函数，或者包含 apply 方法的对象
3、在方法体内通过 webpack 提供的 API 获取资源做响应处理
4、将处理完的资源通过 webpack 提供的方法返回给该资源

## webpack.common.js

// const path = require('path')
const resolveApp = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 打包是自动创建自动创建 html
const TerserPlugin = require("terser-webpack-plugin")  // 代码拆分加载打包去除不必要文件
const {
    merge } = require('webpack-merge')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

// 时间分析
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()

// 导入其他的配置
const prodConfig = require('./webpack.dev')
const devConfig = require('./webpack.dev')

// 定义对象保存 base 配置信息
const commonConfig = {
   
	entry: './src/main.js',  // 编译目标资源文件
	devtool: 'source-map',  // 代码映射，定位报错位置
	// inline 列报错，cheap 提高效率去掉空行。cheap-module 原本还原。
	resolve: {
   
		extensions: [".js", ".json", ".ts", ".jsx", ".vue"],  // 匹配路由后面的路径，省略文件格式后缀
		alias: {
   
			// '@': path.resolve(__dirname, '../src')  // 匹配路由后面的路径，省略路径前面的 ./
			'@': resolveApp('./src')
		}
	},
	output: {
   
		filename: 'js/build.js', // 输出文件名 并且单独放到 js 目录下
		// filename: 'js/[name].build.js',  // 代码拆分打包，动态文件名
		// path.resolve(__dirname, '../dist'), // 输出文件夹
		path: resolveApp('./dist'),
		publicPath: '/lg'  // 相对路径或者绝对路径，地址目录
	},
	externals: {
     // 引入CDN
		lodash: '_'  //  引入后的命名
	},
	optimization: {
   
		minimizer: [
			new TerserPlugin({
   
				extractComments: false,
			}),
		],
		splitChunks: {
   
			chunks: 'all',  // 支持异步和同步 all
			minSize: 20000,  // 文件大小
			maxSize: 20000,
			minChunks: 1,
			cacheGroups: {
   
				syVendors: {
   
					test: /[\\/]node_modules[\\/]/,
					filename: 'js/[id]_vendor.js',  // filename 可以动态，name 只能写死
					priority: -10,
				},
				default: {
     // 访问次数
					minChunks: 2,
					filename: 'js/syy_[id].js',
					priority: -20,
				}
			}
		}
	},
	module: {
     // 资源模块
		rules: [  // 规则
			{
   
				test: /\.css$/,
				use: [
					'style-loader',
					{
   
						loader