1.拆分、合并
webpack-merge
devlopment
production
2.webpack-dev-serve
```
devServer:
{
port
contentBase
progress
open
compress
proxy:{
'xxx':{
target:'...',
pathRewrite:{
"^/api"
},
changeOrigin:true
}
}
}
```
3.处理样式
css
```
module:{
rules:[
{
test:/\.scss$/,
loader:[
'style-loader',
'css-loader',
'postcss-loader'//兼容性
'sass-loader'//css预处理器
]
}
]
}
```
```
package.json
broswerlist:{}
```
4.处理图片
```
module:{
rules:[
{
test:/\.(jpeg|png)$/,
loader:'file-loader',//开发环境
}
{
test:/\.(jpeg|png)$/,
loader:'url-loader',//生产环境
option:{
limit:5 * 1024,
outputPath:'/img/'
}
}
]
}
```
5.多入口
```
entry:{
index:"./src/index.js"
other:"./src/other.js"
}
```
```
output:{
filename:'[name].js'
path:path.resolve(__dirname:'../dist')
}
```
```
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'
filename:'index.html'
chunks:['index']
}),
new htmlWebpackPlugin({
template:'./src/othe.html'
filename:'other.html'
chunks:['other']
}),
]
```
6.抽离css
生产环境
```
module:{
rules:[
{
test:/\.css$/,
loader:[
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'//兼容性
]
}
]
}
```
```
plugins:[
MiniCssExtractPlugin({
filename:'css/main.[contentHash:8].css'
})
]
```
优化
```
optimization:[
minizer:[
new TerserPlugin(),
new OptimizeCssAssetsWebpackPlugin()
]
]
```
7.抽离公共代码
公共模块代码
不需要重复打包，单独抽离公共模块
第三方模块
单独抽离成模块
生产环境配置
```
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'
filename:'index.html'
chunks:['index','vendor','common']
}),
new htmlWebpackPlugin({
template:'./src/othe.html'
filename:'other.html'
chunks:['other','common']
}),
]
```
```
optimization:[
minizer:[
new TerserPlugin(),
new OptimizeCssAssetsWebpackPlugin()
],
splitChunks:{
//all 同步异步都分割
// async 异步代码分割 import('lodash')
// initial 同步代码分割 import lodash from 'lodash'
chunks:'all',
cacheGroups:{
vendor:{//第三方模块
name:'vendor',
priority:1,//优先级越高越先处理
test:/node_modules/,
minSize:0,
minChunks:1
},
common:{//公共模块
name:'common',
priority:0,
minSize:0,
minChunks:2
}
}
}
]
```
