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生態,至少,完善一下開發者文檔啊。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM