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

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

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

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

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

• 將devServer節點刪掉：

  devServer: { hot: true, open: true, port: 4321 }

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

  new webpack.HotModuleReplacementPlugin()

1. 修改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]' }
複製代碼

1. 在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', '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，對，要一鍵生成的那種。