一些運用webpack的方法或者說策略

webpack能夠說不用就難受，那麼它有哪些咱們須要注意的呢？ <1> webpack的發佈策略

1. 在實際開發中，通常會有兩套項目方案：

• 一套是開發期間的項目，包含了測試文件、測試數據、開發工具、測試工具等相關配置，有利於項目的開發和測試，可是這些文件僅用於開發，發佈項目時候須要剔除；
• 另外一套是部署期間的項目，剔除了那些客戶用不到的測試數據測試工具和文件，比較純淨，減小了項目發佈後的體積，有利於安裝和部署！

2. 爲了知足咱們的發佈策略，須要新建一個配置文件，命名爲webpack.publish.config.js，將webpack.config.js的配置拷貝過去，剔除一些開發配置項便可：

• 將devServer節點刪掉：

devServer: {
       hot: true,
       open: true,
       port: 4321
   }
複製代碼

• 將plugins節點下的熱更新插件刪掉：

new webpack.HotModuleReplacementPlugin()
複製代碼

3. 修改url-loader，將圖片放入統一的images文件夾之下：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/[name].[ext]' }
複製代碼

或者使用img-前綴加上7位的hash名稱：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/img-[hash:7].[ext]' }
複製代碼

4. 在package.json中的script節點下新增dev命令，經過--config指定webpack啓動時要讀取的配置文件：

"pub": "webpack --config webpack.publish.config.js"
複製代碼

<2> 每次從新構建時候刪除dist目錄

1. 運行cnpm i clean-webpack-plugin --save-dev
2. 在頭部引入這個插件：

var cleanWebpackPlugin = require('clean-webpack-plugin');
複製代碼

3. 在plugins節點下使用這個插件：

new cleanWebpackPlugin(['dist'])
複製代碼

分離第三方包改造webpack.publish.config.js

1. 改造entry節點以下：

entry: {
        app: path.resolve(__dirname, 'src/js/main.js'), // 本身代碼的入口
        vendors: ['jquery'] // 要分離的第三方包的入口
    }
複製代碼

2. 在plugins節點下新增插件：

new webpack.optimize.CommonsChunkPlugin({ // 抽離第三方包的插件
        name:'vendors', // 指定抽離第三方包的入口名稱
        filename:'vendors.js' // 抽離出的公共模塊的名稱
})
複製代碼

3. html-webpack-plugin在生成index.html文件的時候，會自動將抽離的第三方包引入進去！

優化壓縮JS

在plugins數組中添加：

new webpack.optimize.UglifyJsPlugin({ // 優化壓縮JS
    compress:{
        warnings:false // 移除警告
    }
}),
new webpack.DefinePlugin({ // 設置爲產品上線環境，進一步壓縮JS代碼
    'process.env.NODE_ENV': '"production"'
})
複製代碼

<3> 優化壓縮HTML文件 在plugins節點下的htmlWebpackPlugin插件中，添加minify子節點：

minify:{// 壓縮HTML代碼
    collapseWhitespace:true, // 合併空白字符
    removeComments:true, // 移除註釋
    removeAttributeQuotes:true // 移除屬性上的引號
}
複製代碼

其餘優化項請參考：html-minifier - github

抽取CSS文件

1. 運行npm install --save-dev extract-text-webpack-plugin安裝抽取CSS文件的插件。
2. 在配置文件中導入插件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
複製代碼

3. 修改CSS和Sass的loader以下：

{
    test: /\.css$/, use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader"],
        publicPath: '../' // 設置圖片路徑
    })
},
{
    test: /\.scss$/, use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader', 'sass-loader'],
        publicPath: '../' // 設置圖片路徑
    })
}
複製代碼

4. 在plugins節點下新增插件：

new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件的插件
複製代碼

<4>壓縮抽取出來的CSS文件 (https://github.com/NMFR/optimize-css-assets-webpack-plugin)

1. 運行cnpm i optimize-css-assets-webpack-plugin --save-dev安裝插件到開發依賴。
2. 在配置文件頭部導入插件：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
複製代碼

3. 在plugins節點下新增插件：

new OptimizeCssAssetsPlugin() // 壓縮CSS文件的插件
複製代碼

<5> 相關文章

1. Sass 基礎教程
2. webpack-dev-server
3. You have not accepted the license agreements of the following

服務員，打包一個webpack，對，要一鍵生成的那種。