webpack4.0配置記錄（2）

摘要： 接上一篇webpack4.0配置記錄(1) ,繼續記錄學習webpack配置。 定義環境變數 new Webpack.DefinePlugin({//用來定義全域性環境變數 DEV:JSON.stringify('dev'), FLAG:&...

接上一篇webpack4.0配置記錄(1) ,繼續記錄學習webpack配置。

定義環境變數

new Webpack.DefinePlugin({//用來定義全域性環境變數
DEV:JSON.stringify('dev'),
FLAG:'true'
}),

webpack簡單優化

1. noParse

module:{
noParse:'/jquery/',//不去解析設定的包所依賴的關係,如jquery
}

1. ignorePlugin

module:{
noParse:'/jquery/',//不去解析設定的包所依賴的關係
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
include:path.resolve('src'),
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
}

通過exclude排除和include包含某些模組

另外也可以使用webpack自帶的ignorePlugin外掛排除某些包，減少體積。

new webpack.IgnorePlugin(/\.\/locale/,/moment/),

以上配置忽略了時間格式化moment.js中的語言包

1. happypack多執行緒打包

let Happypack=require('happypack')
...
module.exports={
module:{
noParse:'/jquery/',//不去解析設定的包所依賴的關係
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
include:path.resolve('src'),
use:'Happypack/loader?id=js'
// use:{
//loader:'babel-loader',
//options:{
//presets:[
//'@babel/preset-env',
//'@babel/preset-react'
//]
//}
// }
}
]
},
plugins:[
new Happypack({
id:'js',
use:[
{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
]
})
]
}

1. webpack內建功能

(1)tree-shaking

(2)scope-hosting

這兩項優化只在生產環境下有效

1. 抽離公共程式碼

module.exports={
optimization:{
splitChunks:{//分割程式碼塊
cacheGroups:{//緩衝組
common:{
chunks:'initial',
minSize:0,//抽離模組最小粒度是0
minChunks:2//表示程式碼塊用過2次以上就要抽離
},
vendor:{
priority:1,//相當於權重，先抽離第三方模組，如果不設定該屬性，分割程式碼塊將從上到下，無法抽離第三方模組。
test:/node_modules/,
chunks:'initial',
minSize:0,//抽離模組最小是0
minChunks:2//表示用過2次以上就要抽離
}
}
}
},
}

1. 檔案熱更新

devServer:{
hot:true
},
plugins:[
new webpack.NamedModulesPlugin(),//列印更新的模組路徑
new webpack.HotModuleReplacementPlugin()//熱更新
]

7.可以使用dllPlugin動態連結庫優化

DllPlugin 和 DllReferencePlugin提供了以大幅度提高構建時間效能的方式拆分軟體包的方法。原理是將特定的第三方NPM包模組提前構建，然後通過頁面引入。這不僅能夠使得vendor檔案可以大幅度減小，同時，也極大的提高了構件速度。網上別的大神有一篇文章寫的很詳細，可以參考，傳送門 。

以上就是一些自己在學習webpack4.0配置過程中的一些學習記錄，寫出來和大家分享，如果有錯誤，還望告知。個人部落格 同步更新，歡迎關注交流！不要忘了點個贊，謝謝！