module.exports中的 devServer属性:
用来自动化(自动编译，自动打开浏览器 自动刷新浏览器 只会在内存中编译打包 不会有任何输出
启动指令为npx webpack-dev-server
devServer:{
contentBase:resolve(__dirname,'build'), //项目构建后的路径
compress:true, //启动gzip压缩
port:3000, //启动端口号
open:true //自动打开浏览器
}
提取css成单独文件: 安装插件 npm i mini-css-extract-plugin -D
module:{
rules:[
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader, //这个loader取代style-loader 作用:提取js中的css成单独文件
'css-loader' //将css文件整合到js文件中
]
}
]
},
plugins:[
new MiniCssExtractPlugin({ filename:'css/built.css' //对输出的css文件进行重新命名 })
]
css兼容写法： 安装插件 npm install postcss-loader postcss-preset-env -D
{
// module中的配置项
test:/\.css$/,
use:[
//取代css-loader,提取js中css成单独文件
MiniCssExtractPlugin.loader,
//将css文件整合到JS文件中
'css-loader',
//css兼容性处理：postcss --> postcss-loader postcss-preset-env
//帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
{
loader:'postcss-loader',
options: {
ident: 'postcss',//默认配置
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
},
//配置package.json中的browserslist
"browserslist":{
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production":[
">0.1%",
"not dead",
"not op_mini all"
]
}
css的压缩 : npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html' }), new MiniCssExtractPlugin({ filename:'css/built.css'//对输出的文件进行重命名 }), //压缩css文件 new OptimizeCssAssetsWebpackPlugin() ]
js的兼容性处理 ： 安装插件 npm i babel_loader @babel/preset-env @babel/core -D
在module中进行配置
js的压缩：在生产环境下会自动压缩js代码