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，合圖除外)。下面讓我來介紹一下在使用過程當中的一些優化點。

 

 

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

　　在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"

　　}

　　在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上配置。這個辦法最簡單，固然靈活性沒有本身實現一個服務器好。

 

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

　　若是想將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怎麼辦

　　使用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。

　　而後維護者在開發的分支上加了這麼一個特性(證實維護者不想在插件里加內聯功能了，想讓我來弄)：

　　事件

　　容許其它插件去使用執行事件

　　html-webpack-plugin-before-html-processing

　　html-webpack-plugin-after-html-processing

　　html-webpack-plugin-after-emit

　　使用辦法：

　　compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {

　　htmlPluginData.html += 'The magic footer';

　　callback();

　　});

　　不過我仍是決定本身開發一個了一個插件

　　html-res-webpack-plugin，有中英文文檔能夠參考。其實html-webpack-plugin以js做爲入口可能跟webpack的理念更爲一致，但其實直接在html上放link和script更加方便直白一些。並且html-webpack-plugin侷限性太多，若是我想在script上加attribute也是比較麻煩的事兒。因此我乾脆開發一個能夠容許在html上直接放link和script並且支持內聯及md5的插件。

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

 

優化點八.用gulp-webpack速度慢咋辦

　上圖是初始化構建30個文件的用時，一共用了13秒。用了externals優化後，還有100多kb，比用純webpack優化要大50多kb。並且，因爲你用的是gulp-webpack，每次有文件改動，都必須所有從新編譯一次。所以，跟react搭配建議仍是不要用gulp-webpack。由於若是你使用webpack的話，即便初次啓動時速度也並不快，但開發過程當中，webpack會自動識別，只會從新編譯有修改的文件，這大大加快了編譯構建速度。

　　沒辦法，老項目改造，真的要用，乍辦?我提供如下思路

　　(1)當非js文件改變的時候，不要去跑js打包的任務

　　(2)非公共的js發生改變的時候，只執行這個js的打包任務

 

　優化點九.若是在經過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:

　　1common: ['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生態，至少，完善一下開發者文檔啊。