用webpack的CommonsChunkPlugin提取公共程式碼的3種方式
阿新 • • 發佈:2019-01-02
前面我們實現了 多頁面分離資源引用,按需引用JS和css
但有一個問題:最後生成的3個js,都有重複程式碼,我們應該把這部分公共程式碼單獨提取出來。
方式一,傳入字串引數
new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 預設會把所有入口節點的公共程式碼提取出來,生成一個common.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextPlugin = require ('extract-text-webpack-plugin');
module.exports = {
// entry是入口檔案,可以多個,代表要編譯那些js
//entry:['./src/main.js','./src/login.js','./src/reg.js'],
entry:
{
'main':'./src/main.js',
'user':['./src/login.js','./src/reg.js'],
'index':['./src/index.js']
},
externals:{
'jquery' :'jQuery'
},
module:{
loaders:[
// {test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.css$/,loader:extractTextPlugin.extract('style','css')}
],
},
output:{
path: __dirname+'/build/js', // 輸出到那個目錄下(__dirname當前專案目錄)
filename:'[name].js' //最終打包生產的檔名
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/login-build.html',
template:__dirname+'/src/tpl/login.html',
inject:'body',
hash:true,
chunks:['main','user','common.js'] // 這個模板對應上面那個節點
}),
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/index-build.html',
template:__dirname+'/src/tpl/index.html',
inject:'body',
hash:true,
chunks:['index','common.js'] // 這個模板對應上面那個節點
}),
// css抽取
new extractTextPlugin("[name].css"),
// 提供公共程式碼
new webpack.optimize.CommonsChunkPlugin('common.js'), // 預設會把所有入口節點的公共程式碼提取出來,生成一個common.js
]
};
方式二,有選擇的提取公共程式碼
// 提供公共程式碼
// 預設會把所有入口節點的公共程式碼提取出來,生成一個common.js
// 只提取main節點和index節點
new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),
方式三,有選擇性的提取(物件方式傳參)
推薦
new webpack.optimize.CommonsChunkPlugin({
name:'common', // 注意不要.js字尾
chunks:['main','user','index']
}),
通過CommonsChunkPlugin,我們把公共程式碼專門抽取到一個common.js,這樣業務程式碼只在index.js,main.js,user.js