隨著webpack3.x的發(fā)布莉御，其功能也越來越強大，很多的項目的編譯打包工具也由gulp逐漸轉移到webpack氨距。
1. 用yarn代替npm
npm是一款非常好的包管理工具，之前在用npm安裝項目依賴的時候總會因為某些依賴包推出了新版本從而導致編譯結果不一樣的問題，這是因為在安裝依賴的時候npm并沒有鎖定依賴包的版本號(npm5好像已經解決了這個問題)喊积，每次安裝的時候總是獲取最新的依賴包，導致編譯結果不一樣玄妈。用yarn安裝依賴包可以完美的解決這個問題乾吻。
去官網下載并安裝yarn
在命令行中執(zhí)行yarn -versions,若能輸出版本號表示安裝成功
2. 初始化生成package.json文件
執(zhí)行yarn init,填寫項目相關信息
3. 安裝項目依賴包和開發(fā)依賴包
執(zhí)行yarn add *** ,安裝項目依賴包，添加--dev表示安裝成開發(fā)依賴拟蜻，具體安裝的依賴包可查閱項目源碼中package.json文件
4. 建立常用庫配置文件并打包常用庫文件
1. 新建webpack-dll.config.js文件
這個配置文件只要是用來打包庫文件的绎签，這里介紹下幾個重點配置
output: {
path: outputDir,
filename: 'js/lib/[name].js',
library: '[name]_library',
/*libraryTarget: 'umd'*/
},
output中的library和libraryTarget是為了自定義打包后的文件以怎樣的形式輸出，這里采用默認的var形式
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
這里定義環(huán)境為開發(fā)環(huán)境酝锅，方便生成的庫文件直接用于開發(fā)環(huán)境
//穩(wěn)定模塊ID
new webpack.HashedModuleIdsPlugin(),
new webpack.DllPlugin({
// 本Dll文件中各模塊的索引诡必，供DllReferencePlugin讀取使用
path: dll_manifest_name + '.json',
//當前Dll的所有內容都會存放在這個參數指定變量名的一個全局變量下，注意與參數output.library保持一致
name: '[name]_library',
// 指定一個路徑作為上下文環(huán)境搔扁，需要與DllReferencePlugin的context參數保持一致爸舒，建議統(tǒng)一設置為項目根目錄
context: __dirname,
})
這個是為了穩(wěn)定模塊ID并生成manifest文件稿蹲，方便在生產環(huán)境中通過讀取dll_manifest知道哪些文件已經被dll打包苛聘，而不需要再次打包
2. 生成庫文件dll.js
執(zhí)行 yarn dll,會在src/app/js/lib/文件夾下生成dll.js文件唱捣，該文件打包了vue2.5.13,axios0.17.1,flexible,webpack-zepto，具體要打包哪些文件可由webpack-dll.config.js中的entries來配置
若有必要可考慮生成dll.css
5. 建立配置文件
這里我將配置文件分為3個欢瞪，一個基礎配置文件，一個開發(fā)環(huán)境配置文件骑祟，一個生產環(huán)境配置文件潜圃，開發(fā)環(huán)境和生產環(huán)境配置文件通過webpack-merge插件調用基礎配置文件堵第。
基礎配置文件webpack.base.js
在基礎配置文件中包含了基本的配置信息，這里主要介紹下多頁面配置中的htmlWebpackPlugin插件的使用。
var pages = getEntry(entryDir + '/html/**/*.ejs');
for (var pathname in pages) {
var conf = {
// html模板文件輸入路徑
template: entryDir + '/html/' + pathname + '.js',
// html文件輸出路徑
filename: outputDir + '/html/' + pathname + '.html',
inject: true,
cache: true, //只改動變動的文件
minify: {
removeComments: true,
collapseWhitespace: false
}
};
//根據chunks提取頁面js,css和公共verdors
if (pathname in module.exports.entry) {
conf.chunks = [pathname, 'vendors'];
} else {
conf.chunks = ['vendors'];
}
module.exports.plugins.push(new htmlWebpackPlugin(conf));
}
這里多頁面配置采用的是ejs模板幔摸，通過循環(huán)入口文件嗦玖，每個模板文件都配置一個htmlWebpackPlugin插件編譯，最后達到生成多個頁面的目的，通過chunks來提取頁面的js/css/img等
開發(fā)環(huán)境配置文件webpack.dev.js
在開發(fā)環(huán)境配置文件，通過使用webpack-dev-server插件來建立一個靜態(tài)服務器提供服務
devServer: {
//設置服務器主文件夾挪略，默認情況下挽牢，從項目的根目錄提供文件
contentBase: outputDir,
//自動開啟默認瀏覽器
//open: true,
//開啟熱模塊替換,只重載頁面中變化了的部分
//hot: true,
//hotOnly:true,
//開啟gzip壓縮
compress: true,
//使用inlilne模式,會觸發(fā)頁面的動態(tài)重載
inline: true,
//當編譯錯誤的時候，網頁上顯示錯誤信息
overlay: {
warnings: true,
errors: true
},
//瀏覽器自動打開的文件夾
//openPage: 'html/',
//只在shell中展示錯誤信息
//stats: 'errors-only',
//設置域名摊求，默認是localhost
host: 'localhost',
port: 8080
},
在使用熱更新時需要使用熱更新插件
//熱模塊替換插件
new webpack.HotModuleReplacementPlugin()
生產環(huán)境配置文件webpack.prod.js
在生產環(huán)境中我們需要關注公共組件的分離卓研，代碼壓縮，文件緩存等問題睹簇，在公共組件分離時通過讀取dll_manifest文件知道哪些文件不用打包，從而減少打包后的文件大小
new webpack.HashedModuleIdsPlugin(),
new webpack.DllReferencePlugin({
// 指定一個路徑作為上下文環(huán)境寥闪，需要與DllPlugin的context參數保持一致太惠，建議統(tǒng)一設置為項目根目錄
context: __dirname,
// 指定manifest.json
manifest: require('../' + dll_manifest_name + '.json'),
// 當前Dll的所有內容都會存放在這個參數指定變量名的一個全局變量下，注意與DllPlugin的name參數保持一致
name: 'dll_library',
}),
在考慮代碼壓縮時通過使用以下配置
//壓縮css代碼
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要寫成 /\.css$/g
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: { removeAll: true },
// 避免 cssnano 重新計算 z-index
safe: true
},
canPrint: true
}),
//提取css
new ExtractTextPlugin('css/[name].css?v=[contenthash:8]'),
//壓縮JS代碼
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false,
}
}),
在考慮線上文件緩存問題時可以使用以下配置
output: {
//publicPath: 'http://localhost:8080/',
filename: 'js/[name].js?v=[chunkhash:8]'
},
這里建議使用chunkhash,使用hash每次編譯都會變化
