2021-07-22

webpack

1. webpack五个核心概念：entry output loader（处理非js文件） Plugins（插件：执行更广的任务） mode:(1.development:能让代码本地调试的运行环境 2.production：能优化上线运行的环境【即实际开发生产环境】）

2. 打包之后有一个哈希值 可以作为以后命名文件的名字（标识）

3. webpack可以打包js和JSON文件 （import data from ‘JSON地址’） 不能打包css和img等非js文件

4. 生产环境和开发环境将ES6模块化编译成浏览器能够识别的模块化

5. 生产环境比开发环境多了一个压缩js代码

6. 不同文件配置不同得loader

7. 打包html资源 用Plugin插件: HTML-webpack-plugin 功能 默认会创建一个空的html，自动引入打包输出的资源（js/css）通过new的方式创建，new HtmlWebpackPlugin（{ template：‘要复制的模板html文件’}）

8. 打包图片资源 安装url-loader和file-loader加载器 但是没办法处理html中img引入的图片 而html中的img图片要用html-loader来处理

9. 

10. 字体的引入需要用file-loader来处理

{
	exclude:/\.(js|css|html|less)/, //排除以上这些文件 字体文件等其他文件用file-loader来处理
	loader:'file-loader'
}

2. 
   在图片处理中加入outputPath：‘imgs’, 打包后的图片就会在归类到imgs下

3. 提取css文件成单独文件 输入口令：npm i mini-css-extract-plugin -d 用MiniCssExtractPlugin.loader取代style-loader 作用：提取js中的css成为单独的文件

4. css兼容性处理：postcss————postcss-loader postcss-preset-env
   
   

//将重复的代码打包
const commonCssLoader =[
	MiniCssExtractPlugin.loader,
	"css-loader",
	loader:'postcss-loader',
	options:{
	ident:'postcss',
	plugins:()=>[
		require('postcss-preset-env')()
		]	
	}
]
//调用
use:[...commonCssLoader]// 通过...来展开，实现代码的复用

3. 压缩css代码：用//安装 css-minimizer-webpack-plugin
const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’);-webpack-plugin’);//压缩css文件
new CssMinimizerPlugin(),

4. js语法检查：eslint-loader eslint
   
   在option里加 fix：true//自动修复eslint的错误
   
   

5. js兼容性处理
   

6. 压缩js：只需要将mode改为生产模式：prodution

7. 压缩html：