webpack生产环境配置
一、提取打包后的css文件为单独文件
使用的插件：mini-css-extract-plugin
第一步：下载并引入插件
//下载命令
npm i mini-css-extract-plugin
//引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') 第二步：使用插件
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'//对输出的文件进行重命名
}), 第二步：在样式的loader配置中使用MiniCssExtractPlugin.loader {
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}, 二、css兼容性处理
使用的loader：postcss
使用的插件：postcss-preset-env
1.下载loader和插件
npm i postcss-loader postcss-preset-env
2.创建postcss.config.js文件
module.exports = {
plugins: [
require('postcss-preset-env')
]
} 3.在css的loader中新增：postcss-loader
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader',
],
}, 4.设置node环境变量
切换不同环境下的兼容性
process.env.NODE_ENV = 'development'
5.在package.json中配置browserslist
"browerslist": {
"developement": [//开发环境
"last 1 chorme version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [//生产环境
">0.2%",
"not dead",
"not op_mini all"
]
}
三、压缩css
使用的插件：optimize-css-assets-webpack-plugin
1.下载和引入插件
npm i optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') 2.使用插件
new OptimizeCssAssetsWebpackPlugin()
四、js语法检查
使用的loader：eslint-loader eslint（eslent-loader依赖于eslint）
注意：只检查自己写的源代码，第三方库的代码不用检查，使用eslint-disable-next-line可以使eslint的规则失效(下一行不进行eslint检查，要使用//注释的方式表示)
此处使用的检查规则是airbnb，所以需要用到：eslint-config-airbnb-base eslint-plugin-import eslint
1.下载
npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
2.配置loader
{
test: /\.js$/,
exclude: /node_modules/,//排除node_modules下的文件
loader: 'eslint-loader',
options: {
fix: true//自动修复eslint的错误
}
} 3.在package.json中配置相应内容
"eslintConfig":{
"extends": "airbnb-base",
"env":{
"browser":true//让eslint认识像navigator window这样的全局变量
}
}
五、js兼容性处理
1.基本的兼容性处理
使用的loader和插件：babel-loader @babel-core @babel/preset-env
问题：只能转换基本语法，如promise不能转换
（1）下载
npm i babel-loader @babel-core @babel/preset-env
（2）配置
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']//预设，只是babel做怎么样的兼容性处理
}
} 2.全部兼容性处理
涉及到的loader和插件(库)： @babel/polyfill
注意：会将js有关兼容性的东西全部纳入，将浏览器不能识别的方法直接定义好挂载到相应的对象上，比如Array、Object...,无论浏览器能否识别都可以用
问题：如果只需要解决部分兼容性问题，但是却将所有兼容性代码引入，体积太大
（1）下载
npm i @babel/polyfill （2）只需要在入口文件中引入@babel/ployfill即可
import "@babel/ployfill"
3.按需兼容性处理
使用的loader和插件(库)：babel-loader @babel/core @babel/preset-env core-js
（1）下载
npm i babel-loader @babel-core @babel/preset-env core-js
（2）配置loader
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',//预设，只是babel做怎么样的兼容性处理
{
useBuiltIns: 'usage',// 按需加载
corejs: {//指定core-js的版本
version: 3
},
targets: {//指定兼容性到浏览器的哪个版本
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
}
}
六、js/html压缩
1.js压缩
将mode设置为production
2.HTML压缩
设置html-webpack-plugin插件
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {//压缩html代码
collapseWhitespace: true,//清除空格
removeComments: true//清除注释
}
}), 
查看16道真题和解析
