webpack使用優化
至少，完善一下開發者文檔啊
你是指那個boilerplate嗎？我這兩天弄一下哈。
不是，重復了下webpack會取代gulp哈！ :)
覺得webpack文檔超亂 : (
因為它是配置型的構建，所以內容比較多。而且例子也不足。
gulp屬于任務型的，更多依賴插件，所以文檔相對簡單一些。
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
前言
本文不是webpack入門文章，如果對webpack還不了解，請前往題葉的Webpack入門，或者阮老師的Webpack-Demos。
為什么要使用Webpack
第3點我想稍微論述一下，如果看過我之前寫的《如何寫一個webpack插件（一）》，會發現，webpack會將文件內容存在compilation這個大的object里面，方便各種插件，loader間的調用。雖然gulp也用到了流(pipe)這樣的內存處理方式，但感覺webpack更進一步。gulp是每一個任務(task)用一個流，而webpack是共享一個流。
簡要回顧Webpack的配置
Webpack的配置主要為了這幾大項目：
常用Loaders介紹
常用Plugins介紹
使用優化
了解了以上介紹的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的構建（不需要gulp與grunt，合圖除外）。下面讓我來介紹一下在使用過程中的一些優化點。
優化點一.如何區分開發及生產環境
"scripts": { "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors", "publish-win": "set NODE_ENV=prod&&webpack -p --progress --colors" }優化點二.使用代碼熱替換
方法一：
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導致文件變大，編譯速度變慢，乍辦?
如果你想將react分離，不打包到一起，可以使用externals。然后用
<script>單獨將react引入如果不介意將react打包到一起，請在alias中直接指向react的文件。可以提高webpack搜索的速度。準備部署上線時記得將換成react.min，能減少文件大小(減少約600kb)
優化點四.將模塊暴露到全局
如果想將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", }),優化點五.多個html怎么辦
僅使用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只需要100多200ms。建議還是用webpack吧。
優化點八. 公并公共代碼
有些類庫如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可以省下不少搜索硬盤的時間。
優化點十.如果在通過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:
在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嗎
有樣版boilerplate項目嗎
目前有一個還沒有成型的，我先放在這里，目前可以通過查看gulpfile.js和webpack.config.js文件進行學習
steamer_branch_v2。要成為boilerplate還待我花一周時間整理。