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

米酒小麵包發表於2019-03-02
Web

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`);
複製程式碼
  1. 在plugins節點下使用這個外掛：
new cleanWebpackPlugin([`dist`])
複製程式碼

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

  1. 改造entry節點如下：
entry: {
        app: path.resolve(__dirname, `src/js/main.js`), // 自己程式碼的入口
        vendors: [`jquery`] // 要分離的第三方包的入口
    }
複製程式碼
  1. 在plugins節點下新增外掛：
new webpack.optimize.CommonsChunkPlugin({ // 抽離第三方包的外掛
        name:`vendors`, // 指定抽離第三方包的入口名稱
        filename:`vendors.js` // 抽離出的公共模組的名稱
})
複製程式碼
  1. 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");
複製程式碼
  1. 修改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: `../` // 設定圖片路徑
    })
}
複製程式碼
  1. 在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`);
複製程式碼
  1. 在plugins節點下新增外掛：
 new OptimizeCssAssetsPlugin() // 壓縮CSS檔案的外掛
複製程式碼

<5> 相關文章

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

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

相關文章