隨着webpack3.x的發布，其功能也越來越強大，很多的項目的編譯打包工具也由gulp逐漸轉移到webpack。最近因為項目重構考慮使用使用vue，同時想從原來的gulp切換到webpack，所以搭建了webpack-vue的前端腳手架工具，這里記錄下搭建的過程中的要點。項目源碼
1. 用yarn代替npm
npm是一款非常好的包管理工具，之前在用npm安裝項目依賴的時候總會因為某些依賴包推出了新版本從而導致編譯結果不一樣的問題，這是因為在安裝依賴的時候npm並沒有鎖定依賴包的版本號(npm5好像已經解決了這個問題)，每次安裝的時候總是獲取最新的依賴包，導致編譯結果不一樣。用yarn安裝依賴包可以完美的解決這個問題。
去官網下載並安裝yarn
在命令行中執行yarn -versions,若能輸出版本號表示安裝成功
2. 初始化生成package.json文件
執行yarn init,填寫項目相關信息
3. 安裝項目依賴包和開發依賴包
執行yarn add *** ,安裝項目依賴包，添加--dev表示安裝成開發依賴，具體安裝的依賴包可查閱項目源碼中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')
}
}),
這里定義環境為開發環境，方便生成的庫文件直接用於開發環境
//穩定模塊ID
new webpack.HashedModuleIdsPlugin(),
new webpack.DllPlugin({
// 本Dll文件中各模塊的索引，供DllReferencePlugin讀取使用
path: dll_manifest_name + '.json',
//當前Dll的所有內容都會存放在這個參數指定變量名的一個全局變量下，注意與參數output.library保持一致
name: '[name]_library',
// 指定一個路徑作為上下文環境，需要與DllReferencePlugin的context參數保持一致，建議統一設置為項目根目錄
context: __dirname,
})
這個是為了穩定模塊ID並生成manifest文件，方便在生產環境中通過讀取dll_manifest知道哪些文件已經被dll打包，而不需要再次打包
2. 生成庫文件dll.js
執行 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個，一個基礎配置文件，一個開發環境配置文件，一個生產環境配置文件，開發環境和生產環境配置文件通過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模板，通過循環入口文件，每個模板文件都配置一個htmlWebpackPlugin插件編譯，最后達到生成多個頁面的目的，通過chunks來提取頁面的js/css/img等
開發環境配置文件webpack.dev.js
在開發環境配置文件，通過使用webpack-dev-server插件來建立一個靜態服務器提供服務
devServer: {
//設置服務器主文件夾，默認情況下，從項目的根目錄提供文件
contentBase: outputDir,
//自動開啟默認瀏覽器
//open: true,
//開啟熱模塊替換,只重載頁面中變化了的部分
//hot: true,
//hotOnly:true,
//開啟gzip壓縮
compress: true,
//使用inlilne模式,會觸發頁面的動態重載
inline: true,
//當編譯錯誤的時候，網頁上顯示錯誤信息
overlay: {
warnings: true,
errors: true
},
//瀏覽器自動打開的文件夾
//openPage: 'html/',
//只在shell中展示錯誤信息
//stats: 'errors-only',
//設置域名，默認是localhost
host: 'localhost',
port: 8080
},
在使用熱更新時需要使用熱更新插件
//熱模塊替換插件
new webpack.HotModuleReplacementPlugin()
生產環境配置文件webpack.prod.js
在生產環境中我們需要關注公共組件的分離，代碼壓縮，文件緩存等問題，在公共組件分離時通過讀取dll_manifest文件知道哪些文件不用打包，從而減少打包后的文件大小
new webpack.HashedModuleIdsPlugin(),
new webpack.DllReferencePlugin({
// 指定一個路徑作為上下文環境，需要與DllPlugin的context參數保持一致，建議統一設置為項目根目錄
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每次編譯都會變化
至此配置以基本完成，目前仍有一些不足之處，一直在改進。源碼src/app/文件夾下有一demo，大家可參考demo愉快的進行開發了，有問題歡迎評論提出