利用webpack搭建的前端工程化環境

隨着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愉快的進行開發了，有問題歡迎評論提出

參考文獻

1. webpack官方文檔,
2. Webpack的dll功能,
3. 詳解webpack中的hash、chunkhash、contenthash區別