> 來源：[知乎](http://zhuanlan.zhihu.com/FrontendMagazine/20397902) > 作者：張軒 > 著作權歸作者所有。 **注意啦：如果你還沒有看第一篇 請先看下第一篇的基礎知識：[Webpack傻瓜式指南（一） - 前端外刊評論 - 知乎專欄](http://zhuanlan.zhihu.com/FrontendMagazine/20367175) 然后再來閱讀這一篇** 上一章講了webpack的最基本基本用法，出乎意料的受到大家的歡迎，這一節講更深入的技巧，這一節也更深入大家做項目的實戰經驗，一個項目分為開發和上線兩個大的階段，那么我們的技巧就分成這兩大塊來分開講解。 ## **開發技巧** ### 啟用source-map 現在的代碼是合并以后的代碼，不利于排錯和定位，只需要在config中添加 ~~~ ... devtool: 'eval-source-map', ... ~~~ 這樣出錯以后就會采用source-map的形式直接顯示你出錯代碼的位置。 ### 配置webpack-dev-server代理 既然常用webpack做React一類的SPA，那么一個典型的例子就是前后端分離。后端是一個RESTful的server不管用什么寫的。假定在本機他是類似[http://localhost:5000/api/](http://localhost:5000/api/)*這類的請求，現在添加配置讓ajax請求可以直接proxy過去。 ~~~ devServer: { hot: true, inline: true, //其實很簡單的，只要配置這個參數就可以了 proxy: { '/api/*': { target: 'http://localhost:5000', secure: false } } }, ~~~ 重啟以后 發現/api/*的請求都代理到[http://localhost:5000](http://localhost:5000)去了～ 更多的方法可以看官方文檔 [Webpack dev server proxy](https://webpack.github.io/docs/webpack-dev-server.html#proxy) ### 使用preLoaders和postLoaders 也許你想在寫代碼的時候檢查自己的js是否符合jshint的規范，那么隆重推薦preLoaders和postLoaders，上一節我們已經非常了解loaders了，用它來處理各種類型的文件。perLoaders顧名思義就是在loaders執行之前處理的，webpack的處理順序是perLoaders - loaders - postLoaders。 **安裝jshint** ~~~ npm install jshint-loader --save-dev ~~~ **在config文件中配置** ~~~ module: { ... //和loaders一樣的語法，很簡單 perLoaders: [ { test: /\.jsx?$/, include: APP_PATH, loader: 'jshint-loader' } ] } ... //配置jshint的選項，支持es6的校驗 jshint: { "esnext": true }, ~~~ 好了 現在每次npm run start的時候就可以看到jshint的提示信息啦 ### 加載jQuery plugin或者其他legacy第三方庫 **這個是非常有用的內容!** 你的項目有時候會要加載各種各樣的第三方庫，一些老的庫不支持AMD或者CommonJS等一些先進的格式，比如一些jQuery的插件，它們都依賴jQuery，如果直接引用就會報錯 jQuery is not undefined這類的錯誤，有幾種方法解決 先創建一個jQuery plugin: plugin.js ~~~ (function ($) { const shade = "#556b2f"; $.fn.greenify = function() { this.css( "color", shade ); return this; }; }(jQuery)); ~~~ **第一種方法 使用webpack.ProvidePlugin** webpack提供一個插件 把一個全局變量插入到所有的代碼中，在config.js里面配置 ~~~ ... plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }), //provide $, jQuery and window.jQuery to every script new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] ... ~~~ 在js中引用 ~~~ ... //這個也不需要了 因為$, jQuery, window.jQuery都可以直接使用了 //import $ from 'jquery'; import './plugin.js'; ... myPromise.then((number) => { $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>'); //call our jquery plugin! $('p').greenify(); }); ... ~~~ 發現我們插入的p里面的顏色已經變成了綠色！  **第二種方法 使用imports-loader** 先安裝這個loader ~~~ npm install imports-loader --save-dev ~~~ 然后在入口js中 ~~~ //注意這種寫法 我們把jQuery這個變量直接插入到plugin.js里面了 //相當于在這個文件的開始添加了 var jQuery = require('jquery'); import 'imports?jQuery=jquery!./plugin.js'; //后面的代碼一樣 myPromise.then((number) => { $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>'); //call our jquery plugin! $('p').greenify(); }); ~~~ ## **部署上線** 剛才說的各種情況都是在開發時候的情況，那么假如項目已經開發完了，需要部署上線了。我們應該新創建一個單獨的config文件，因為部署上線使用webpack的時候我們不需要一些dev-tools,dev-server和jshint校驗等。 復制我們現有的config文件，命名為 webpack.production.config.js，將里面關于 devServer等和開發有關的東西刪掉。 在package.json中添加一個命令。 ~~~ "scripts": { "start": "webpack-dev-server --hot --inline", "build": "webpack --progress --profile --colors --config webpack.production.config.js" }, ~~~ 當要上線的時候,運行 ~~~ npm run build ~~~ 可以發現build文件夾中生成了所有東西。 ### 分離app.js和第三方庫 現在我們build出來的只有一個bundle.js 如果第三方庫很多的話，會造成這個文件非常大，減慢加載速度，現在我們要把第三方庫和我們app本身的代碼分成兩個文件。 **修改entry入口文件** ~~~ entry: { app: path.resolve(APP_PATH, 'index.js'), //添加要打包在vendors里面的庫 vendors: ['jquery', 'moment'] }, ~~~ **添加CommonsChunkPlugin** ~~~ plugins: [ //這個使用uglifyJs壓縮你的js代碼 new webpack.optimize.UglifyJsPlugin({minimize: true}), //把入口文件里面的數組打包成verdors.js new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), new HtmlwebpackPlugin({ title: 'Hello World app' }) ] ~~~ 添加完畢 運行npm run build 在build文件夾中發現如下結構 * budle.js * index.html * vendors.js ### 生成多頁面 應用不可能都是SPA，不可能只生成一個html文件，如果想生成多個html頁面這么玩？其實也是很簡單的: 現在的需求是這樣的，有兩個頁面，一個叫index.html 它需要引用vendors.js和app.js這兩個文件，還有一個mobile.html頁面他要引用vendors.js和mobile.js這兩個文件。 首先新建一個叫mobile.js的入口文件，比app.js更簡單一些 ~~~ import './main.scss'; import $ from 'jquery'; import 'imports?jQuery=jquery!./plugin.js'; $(document).ready(function() { let app = document.createElement('div'); app.innerHTML = '<h1>Hello World</h1>'; document.body.appendChild(app); $('h1').greenify(); }); ~~~ 在config里面配置 ~~~ entry: { //三個入口文件，app, mobile和 vendors app: path.resolve(APP_PATH, 'index.js'), mobile: path.resolve(APP_PATH, 'mobile.js'), vendors: ['jquery', 'moment'] }, output: { path: BUILD_PATH, //注意 我們修改了bundle.js 用一個數組[name]來代替，他會根據entry的入口文件名稱生成多個js文件，這里就是(app.js,mobile.js和vendors.js) filename: '[name].js' }, ~~~ 原來我們是沒有模版文件的，原來利用的HtmlWebpackPlugin的默認模版。誰想到這偉大的插件還可以自定義模版。 所以新建一個專門放模版的文件夾templates,在里面加兩個模版文件index.html 和 mobile.html **index.html** ~~~ <!DOCTYPE html> <html> <head> <title>{%= o.htmlWebpackPlugin.options.title %}</title> </head> <body> <h3>Welcome to webpack</h3> </body> </html> ~~~ **mobile.html** ~~~ <!DOCTYPE html> <html> <head> <title>{%= o.htmlWebpackPlugin.options.title %}</title> </head> <body> <h3>Welcome to mobile page</h3> </body> </html> ~~~ 繼續配置config.js,現在讓HtmlwebpackPlugin可以生成多個文件 ~~~ ... //Template的文件夾路徑 var TEM_PATH = path.resolve(ROOT_PATH, 'templates'); ... plugins: [ ... //創建了兩個HtmlWebpackPlugin的實例，生成兩個頁面 new HtmlwebpackPlugin({ title: 'Hello World app', template: path.resolve(TEM_PATH, 'index.html'), filename: 'index.html', //chunks這個參數告訴插件要引用entry里面的哪幾個入口 chunks: ['app', 'vendors'], //要把script插入到標簽里 inject: 'body' }), new HtmlwebpackPlugin({ title: 'Hello Mobile app', template: path.resolve(TEM_PATH, 'mobile.html'), filename: 'mobile.html', chunks: ['mobile', 'vendors'], inject: 'body' }) ... ] ~~~ 然后運行 ~~~ npm run build ~~~ 看看生成好的偉大的文件，沒問題！ * app.js * mobile.js * vendors.js * index.html * mobile.html 看看引用的對應關系，完美！！ **index.html** ~~~ <body> <h3>Welcome to webpack</h3> <script src="vendors.js"></script><script src="app.js"></script> </body> ~~~ **mobile.html** ~~~ <body> <h3>Welcome to mobile page</h3> <script src="vendors.js"></script><script src="mobile.js"></script> </body> ~~~ ### 生成Hash名稱的script來防止緩存 經典問題,代碼更新了，但是瀏覽器有緩存，到時候就傻了。 怎么解決，換名字唄。可以直接在后面加參數,也可以直接換掉文件名字。 webpack提供給了我們非常簡單的方法，基于文件的md5，只要把 ~~~ output: { path: BUILD_PATH, //只要再加上hash這個參數就可以了 filename: '[name].[hash].js' }, ~~~ 運行完build以后，看看生成的文件，很完美～ **index.html** ~~~ <body> <h3>Welcome to webpack</h3> <script src="vendors.js"></script><script src="app.b6641abee64c999d95c1.js"></script> </body> ~~~ 好了，你現在了解webpack作為一個module bundler的精髓了吧，把我們的例子做成一個圖，幫助你理解一下。  ## 結語 第二部分到這里結束，這一節討論很多webpack的使用技巧，看起來比較瑣碎，但是在你工作中也許會很實用，下一部分會出現大家都期待的高大上的東西，Webpack和React和Backbone等的結合。 ## 很硬的鏈接 repo的代碼已經更新，想看所有源碼的可以clone下 [vikingmute/webpack-basic-starter · GitHub](https://github.com/vikingmute/webpack-basic-starter) 同時這一系列關于Webpack的文章也可以在github找到 [vikingmute/webpack-for-fools · GitHub](https://github.com/vikingmute/webpack-for-fools)