webpack使用優化

前言

本文不是webpack入門文章，如果對webpack還不了解，請前往題葉的 Webpack入門 ，或者阮老師的 Webpack-Demos 。

為什么要使用Webpack

1. 與react一類模塊化開發的框架搭配著用比較好。
2. 屬于配置型的構建工具，比較用容易上手，160行代碼可大致實現gulp400行才能實現的功能。
3. webpack使用內存來對構建內容進行緩存，構建過程中會比較快。

第3點我想稍微論述一下，如果看過我之前寫的 《如何寫一個webpack插件（一）》 ，會發現，webpack會將文件內容存在compilation這個大的object里面，方便各種插件，loader間的調用。雖然gulp也用到了流(pipe)這樣的內存處理方式，但感覺webpack更進一步。gulp是每一個任務(task)用一個流，而webpack是共享一個流。

簡要回顧Webpack的配置

Webpack的配置主要為了這幾大項目：

• entry：js入口源文件
• output：生成文件
• module：進行字符串的處理
• resolve：文件路徑的指向
• plugins：插件，比loader更強大，能使用更多webpack的api

常用Loaders介紹

• 處理樣式，轉成css，如：less-loader, sass-loader
• 圖片處理，如: url-loader, file-loader。兩個都必須用上。否則超過大小限制的圖片無法生成到目標文件夾中
• 處理js，將es6或更高級的代碼轉成es5的代碼。如： babel-loader，babel-preset-es2015，babel-preset-react
• 將js模塊暴露到全局，如果expose-loader
•  

常用Plugins介紹

• 代碼熱替換, HotModuleReplacementPlugin
• 生成html文件，HtmlWebpackPlugin
• 將css成生文件，而非內聯，ExtractTextPlugin
• 報錯但不退出webpack進程，NoErrorsPlugin
• 代碼丑化，UglifyJsPlugin，開發過程中不建議打開
• 多個 html共用一個js文件(chunk)，可用CommonsChunkPlugin
• 清理文件夾，Clean
• 調用模塊的別名ProvidePlugin，例如想在js中用$，如果通過webpack加載，需要將$與jQuery對應起來
•  

使用優化

了解了以上介紹的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的構建（不需要gulp與grunt，合圖除外）。下面讓我來介紹一下在使用過程中的一些優化點。

優化點一.如何區分開發及生產環境

1. 在package.json里面的script設置環境變量，注意mac與windows的設置方式不一樣

"scripts": {
    "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",
    "publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"
}

1. 在webpack.config.js使用process.env.NODE_ENV進行判斷

優化點二.使用代碼熱替換

使用代碼熱替換在開發的時候無需刷新頁面即可看到更新，而且，它將構建的內容放入內在中，能夠獲得更快的構建編譯性能，因此是官方非常推薦的一種構建方式。

方法一：

1.將代碼內聯到入口js文件里

2.啟動代碼熱替換的plugins

方法二：

直接實現一個server.js，啟動服務器（需要啟動熱替換plugin)，下面是我在業務中用到的一個范例。具體的一些參數可以

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");
 
config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 將執替換js內聯進去
config.entry.index.unshift("webpack/hot/only-dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    hot: true,
    historyApiFallback: false,
    // noInfo: true,
    stats: { 
        colors: true  // 用顏色標識
    },
    proxy: {
        "*": "http://localhost:9000" // 用于轉發api數據，但webpack自己提供的并不太好用
    },
});
server.listen(9000);

方法三：

直接在webpack.config.js上配置。這個辦法最簡單，當然靈活性沒有自己實現一個服務器好。

優化點三.import react導致文件變大，編譯速度變慢，乍辦?

1. 如果你想將react分離，不打包到一起，可以使用externals。然后用<script>單獨將react引入

   

2. 如果不介意將react打包到一起，請在alias中直接指向react的文件。可以提高webpack搜索的速度。準備部署上線時記得將換成react.min，能減少文件大小(減少約600kb)

   

3. 使用module.noParse針對單獨的react.min.js這類沒有依賴的模塊，速度會更快。

優化點四.將模塊暴露到全局

如果想將report數據上報組件放到全局，有兩種辦法：

方法一：

在loader里使expose將report暴露到全局，然后就可以直接使用report進行上報

{
    test: path.join(config.path.src, '/js/common/report'),
    loader: 'expose?report'
},

方法二：

如果想用R直接代表report，除了要用expose loader之外，還需要用ProvidePlugin幫助，指向report，這樣在代碼中直接用R.tdw， R.monitor這樣就可以

new webpack.ProvidePlugin({
    "R": "report",
}),

優化點五. 合并公共代碼

有些類庫如utils, bootstrap之類的可能被多個頁面共享，最好是可以合并成一個js，而非每個js單獨去引用。這樣能夠節省一些空間。這時我們可以用到CommonsChunkPlugin，我們指定好生成文件的名字，以及想抽取哪些入口js文件的公共代碼，webpack就會自動幫我們合并好。

new webpack.optimize.CommonsChunkPlugin({
    name: "common",
    filename: "js/common.js",
    chunks: ['index', 'detail]
}),

優化點六. 善用alias。

resolve里面有一個alias的配置項目，能夠讓開發者指定一些模塊的引用路徑。對一些經常要被import或者require的庫，如react,我們最好可以直接指定它們的位置，這樣webpack可以省下不少搜索硬盤的時間。

優化點七.多個html怎么辦

1. 使用HtmlWebpackPlugin，有多少個html，就排列多少個，記得不要用inject，否則全部js都會注入到html。如果真的要用inject模式，請務必將不需要的js用exclude chunk去掉或者用chunk參數填上你需要入口文件。

僅使用app作為注入的文件：

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['app']
  })
]

不使用dev-helper作為注入文件：

plugins: [
  new HtmlWebpackPlugin({
    excludeChunks: ['dev-helper']
  })
]

如果你不想用inject模式，但又想使用html-webpack-plugin，那你需要在html里用<script>標簽放入對應的js，以及用入對應的css。記住，這些資源的路徑是在生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。

優化點八. html-webpack-plugin不用使inject模式沒又md5，而且不支持文件內聯怎么破？

當時我就給維護者提了一個issue– Add inline feature to the plugin 。

然后維護者在 開發的分支 上加了這么一個特性（證明維護者不想在插件里加內聯功能了，想讓我來弄）：

使用辦法：

  compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
    htmlPluginData.html += 'The magic footer';
    callback();
  });

但相信我之后也會針對html-webpack-plugin再寫一個內聯及md5的插件，適配一直在用這個插件的人。

優化點九.用gulp-webpack速度慢乍辦

上圖是初始化構建30個文件的用時，一共用了13秒。用了externals優化后，還有100多kb，比用純webpack優化要大50多kb。而且，由于你用的是gulp-webpack，每次有文件改動，都必須全部重新編譯一次。因此，跟react搭配建議還是不要用gulp-webpack。因為如果你使用webpack的話，即使初次啟動時速度也并不快，但開發過程中，webpack會自動識別，只會重新編譯有修改的文件，這大大加快了編譯構建速度。

下圖是優化了之后，在開發過程中非公共文件修改后的編譯速度。我的娘，純webpack只需要100多200ms。建議還是用webpack吧。

優化點十.如果在通過webpack在項目中使用bootstrap, jquery以及fontawesome

這一點對于創業公司來說可能比較有用，它們的初期產品都需要快速上線，用一些比較成熟的UI框架會比較好。

這樣，首先我們需要jquery文件，并且安裝bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。還需要sass-loader(3.1.2)及less-loader(2.5.3)。

然后，在主要入口文件要這么引用下面的樣式文件：

require('bootstrap/less/bootstrap.less');
require('font-awesome/scss/font-awesome.scss');
require('./index.scss');

在webpack.config.js的entry項目里，可以加上這個vendor:

common: ['jquery', 'bootstrap'],

在loaders里加入以下loader，將jQuery暴露到全局:

{
    test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),
    loader: 'expose?jQuery'
},

再添加以下loader，讓webpack幫助復制font文件

{ 
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,  
        loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' 
},

在plugins里添加ProvidePlugin，讓$指向jQuery

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
}),

這樣，就可以同時使用jQuery, Bootstrap和Fontawesome了。

webpack會取代gulp嗎

• 未必，但在開發環境，以及不需要一些功能如合圖的情況下，webpack可以完全取代gulp，至少現在我有三個項目完全用webpack進行開發和部署上線
• 要取代gulp,還需要不斷發展它的loader以及plugin生態，至少，完善一下開發者文檔啊。