开发环境的配置可以看另外一个篇文章，这篇写的是生产环境的配置
提取css成单独文件
由于css最后是打包到js中，会造成js体积过大，所以要单独提取出来
依赖：npm install mini-css-extract-plugin -D
需要配置plugins 和loader
loader 配置：因为style-loader是创建style标签将样式插入，所以要单独提取css出来的话，就要关闭style-loader 使用 MiniCssExtractPlugin.loader
MiniCssExtractPlugin.loader 这个取代style-loader，作用是：提取js中的css成单独文件
plugins配置： new MiniCssExtractPlugin( filename: 'css/built.css' ) ，filename对输出的css文件进行重命名和路径输出
css兼容性处理
依赖：npm i postcss-loader postcss-preset-env -D
使用 postcss-loader 的配置：options：{ ident：'postcss', plugins: () => [ require('postcss-preset-env')() ]}
使用postcss-preset-env 插件的作用：帮postcss 找到package.json中的brownslist里面的配置，通过配置加载指定的css兼容性样式
默认使用loader的写法："postcss-loader",需要修改loader配置的写法：{ loader："postcss-loader" , option: {...} }
-
"brownslist"
:[
-
">0.2%",
-
"not dead",
-
"not op_mini all"，
-
"last 1 version"
-
]
压缩css
依赖：npm i optimize-css-assets-webpack-plugin -D
需要配置plugins，new OptimizeCssAssetsWebpackPlugin()
eslint语法检查
依赖：npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D
需要配置loader
eslint-config-airbnb-base 是 权威的js语法检查规则，它依赖 eslint-plugin-import
注意：只检查自己的代码，第三方库不需要检查，exclude： /node_modules/
设置检查规则：在packjson中的eslintConfig中设置，"eslintConfig": {"extends": "airbnb-base"}
使用eslint-loader配置自动修复eslint的错误： options：{ fix: true }
js的兼容性处理
依赖：npm i babel-loader @babel/core -D
需要配置loader
1.基本的js兼容性处理：安装 @babel/preset-env ，问题：只能转化基本语法，如果promise高级语法不能转换
2.全部的js兼容处理：安装 @babel/polyfill ，在main.js 直接导入，打包后体检太大了
3.按需兼容性处理：安装 @core-js
js和html压缩
js压缩：生产环境下会自动压缩js代码，设置 mode："production"
html压缩：在new HtmlWebpackPlugin( { minify: : {...} } ) ，在minify 写上压缩配置
生产环境的基本配置
要先执行eslint（语法检查）在执行babel（将es6转成es5），设置enforce： "pre" 优先执行
-
const path =
require(
'path')
-
const HtmlWebpackPlugin =
require(
'html-webpack-plugin')
-
const MiniCssExtractPlugin =
require(
'mini-css-extract-plugin')
-
const OptimizeCssAssetsWebpackPlugin =
require(
'optimize-css-assets-webpack-plugin')
-
-
module.
exports = {
-
entry:
"./src/index.js",
-
output: {
-
filename:
"bundle.js",
-
path: path.resolve(_dirname,
'build')
-
},
-
mode:
'production',
-
module:{
-
rules:[
-
// eslint检查
-
{
-
test:
/\.js$/,
-
exclude:
/node_modules/,
-
loader:
"eslint-loader",
-
enforce:
"pre",
-
options: {
-
fix:
true
// 自动修复eslint的错误
-
}
-
},
-
// js兼容性处理
-
{
-
test:
/\.js$/,
-
exclude:
/node_modules/,
-
loader:
"babel-loader",
-
options: {
-
presets:[
-
'@babel/preset-env',
-
{
-
useBuiltIns:
'usage',
// 按需加载
-
corejs:{
-
version:
3
// 指定core-js的版本
-
},
-
targets: {
// 指定兼容和性做到哪个版本的浏览器
-
chrome :
'60',
-
firefox:
'60',
-
ie:
'9',
-
safari:
'10',
-
edge:
'17'
-
}
-
}
-
]
-
}
-
},
-
// css 提取和兼容性处理
-
{
-
test:
/\.css$/,
-
use:[
-
MiniCssExtractPlugin.loader,
//如果需要用这个loader，就需要关闭 style-loader
-
"css-loader",
// 将css文件转换为js
-
{
-
loader:
'postcss-loader',
-
options:{
-
ident:
'postcss',
-
plugins:
()=>[
-
require(
'postcss-preset-env')()
// postcss的插件
-
]
-
}
-
}
-
]
-
},
-
// 匹配less文件
-
{
-
test:
/\.less$/,
-
use:[
-
MiniCssExtractPlugin.loader,
-
"css-loader",
-
"less-loader"
-
{
-
loader:
'postcss-loader',
-
options:{
-
ident:
'postcss',
-
plugins:
()=>[
-
require(
'postcss-preset-env')()
-
]
-
}
-
}
-
]
-
},
-
// 匹配图片文件
-
{
-
test:
/\.(jpg|png|gif)$/,
-
loader:
'url-loader',
-
options: {
-
limit:
8*
1024,
-
esModule:
false,
-
name:
'[hash:10].[ext]'
-
}
-
},
-
// 匹配html使用img
-
{
-
test:
/\.html$/,
-
loader:
'html-loader'
-
},
-
{
-
-
exclude:
/\.(html|css|js)$/,
-
loader:
'file-loader',
-
outputPath:
'文件名'
-
}
-
]
-
},
-
plugins:[
-
// js和html整合插件
-
new HtmlWebpackPlugin({
-
template:
"./src/index.html",
-
minify: {
-
collapseWhitespace:
true,
// 移除空格
-
removeComments:
true
// 移除注释
-
}
-
}),
-
//css 提取插件
-
new MiniCssExtractPlugin({
-
filename:
'css/built.css'
// 对输出的css文件进行重命名和路径输出
-
}),
-
// css 压缩插件
-
new OptimizeCssAssetsWebpackPlugin()
-
]
-
}
转载：https://blog.csdn.net/zhenzhenzhen1705/article/details/116717547