Webpack入門

Webpack入門

簡介

Webpack是一個前端構建工具，本文將簡要介紹它最經常使用的功能，並建立一個基於webpack的前端開發環境。

範例項目

包含兩個頁面，列表頁list.html和詳情頁detail.html，僅做爲Webpack打包的演示，不實際開發功能。範例項目是一個多頁面應用，而非SPA（單頁應用）。咱們將使用Webpack來進行前端資源的編譯和打包。

技術選型

1. 樣式：採用SCSS，所以須要將SCSS轉換爲CSS。
2. 腳本：採用ES6編寫，所以須要使用Babel將ES6代碼，轉換爲ES5(目前瀏覽器所支持的)。
3. UI框架：React，所以須要將jsx轉換爲js代碼。

基本使用方法

創建目錄結構

在D盤建一個空文件夾，webpack-tutorial，做爲示例項目的根目錄。結構以下：

• dist
  • js
  • css
• src
  • jsx
  • js
  • css

dist目錄存放由webpack打包後生成的代碼，也是.html頁面所引用的文件；src則是咱們編寫的源碼，一般是沒法直接在頁面上引用的，由於當下的瀏覽器還沒法徹底支持不少新的技術，例如ES6。

安裝Webpack

假設你已經安裝了NodeJS和npm包管理工具，而且版本在3.8.0以上。

打開命令行工具，定位到D:\webpack-tutorial。首先運行npm init，生成package.json文件。

接着安裝webpack，打開命令行工具，執行：

npm install webpack --save-dev

若是是全局安裝webpack，那麼在本文後面安裝完extract-text-webpack-plugin插件後，運行時會報錯，因此建議本地安裝。

運行webpack

如今就能夠運行webpack了，只不過，如今的Webpack並無任何的其餘的能力，例如將scss轉爲css。

在src/js 文件夾下，建一個common.js，公共腳本將寫在這個文件裏，裏面如今只寫一行代碼：

alert("I'm common");

確認命令行的當前目錄爲：D:\webpack-tutorial，而後執行：

webpack src/js/common.js dist/js/common.js

這樣將會在 dist/js文件夾下生成一個common.js文件。接着在根目錄下建立一個 list.html，而後經過script標籤引用dist/js/common.js。用瀏覽器打開list.html能夠看到頁面彈出提示框。

打開 dist/js/common.js，能夠看到它和 src/js/common.js是不一樣的，添加了webpack的模塊機制，後面引入多個模塊時，會看到更詳細地看到它的做用：

/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports) { alert("I'm common"); /***/ } /******/ ]);

能夠看到以上代碼是很不緊湊的，甚至還包含了不少註釋。在生產環境下，咱們但願代碼更加緊湊一些，此時可使用下面的命令：

webpack src/js/common.js dist/js/common.min.js -p

這樣會生成緊湊的js代碼：

!function(r){function o(e){if(t[e])return t[e].exports;var n=t[e]={exports:{},id:e,loaded:!1};return r[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}var t={};return o.m=r,o.c=t,o.p="",o(0)}([function(r,o){alert("I'm common")}]);

使用CommonJS構建模塊

修改common.js：

var text = "I'm common"; module.exports = text;

而後在src/js下添加另外一個文件list.js：

var text = require("./common"); alert(text); alert("I'm list");

能夠看到，list.js依賴於common.js，接着，再次運行webpack：

webpack src/js/list.js dist/js/list.js

修改list.html，如今引用dist/js/list.js（以前是common.js）。打開list.html，會看到它依次彈出了兩次文本框。如今打開list.js，會看到它包含了src/common.js和src/list.js中的代碼。

添加多個模塊

假設這個項目須要用到jQuery，打開命令行工具，安裝它：

npm install jquery -save

這會在webpack-tutorial目錄下生成一個node_modules文件夾，經過npm安裝的的模塊都會在這個文件夾下。修改src/js/list.js，讓它引用jquery：

var $ = require("jquery"); // ... 中間無變化 $("body").css("background-color", "#aaaaaa");

使用code splitting

如今建立一個新的detail.html，並在src/js/下建立detail.js：

var $ = require("jquery"); var text = require("./common"); alert(text); alert("I'm detail"); $("body").css("background-color", "#aaaaff");

它和list幾乎是一摸同樣的，僅僅是爲了示範多文件的狀況。打開命令行，運行webpack：

webpack src/js/detail.js dist/js/detail.js

打開dist/js文件夾，會發現detail.js和list.js文件體積是同樣大的，這是由於它們都包含了common.js和jquery.js。

jquery.js的體積是比較大的，所以，頗有必要將jquery.js打包成一個單獨的文件，而list.js和detail.js分開打包。在webpack中，可使用稱做code splitting（代碼分拆）的技術來實現。

這裏jquery原本就是一個打包好的文件，不須要打包，只須要引用。但實際項目中，可能會有不少個第三方的類庫或者框架，能夠將它們打包到一塊兒。

改寫list.js：

var text = require("./common"); alert(text); alert("I'm list"); require.ensure([], function(){ var $ = require("jquery"); $("body").css("background-color", "#aaaaaa"); }, "jquery");

執行：

webpack src/js/list.js dist/js/list.js --display-modules --display-chunks

注意到後面多了 --display-modules 和 --display-chunks選項，用以顯示文件所包含的模塊。

執行完成後，看到：

Hash: 087ab301df8508cffa3e Version: webpack 1.13.0 Time: 295ms Asset Size Chunks Chunk Names list.js 3.95 kB 0 [emitted] main 1.list.js 267 kB 1 [emitted] jquery chunk {0} list.js (main) 308 bytes [rendered] [0] ./src/js/list.js 248 bytes {0} [built] [1] ./src/js/common.js 60 bytes {0} [built] chunk {1} 1.list.js (jquery) 259 kB {0} [rendered] [2] ./~/jquery/dist/jquery.js 259 kB {1} [built]

能夠看到生成了兩個文件：list.js和1.list.js。其中list.js中包含了 list.js 和 common.js兩個文件，而1.list.js包含了jquery.js。

注意上面的一列：Chunk Names。1.list.js的chunk名稱是jquery，這個是由上面require.ensure方法的第三個參數定義的。後面在使用配置文件時會用到這個名稱。

接着使用瀏覽器打開list.html，用調試器查看頁面元素，會發現爲head部分新插入的script標籤，引用了1.list.js。

使用Chrome查看頁面

這裏，咱們發現了第一個問題：引用的路徑不對。

暫且先無論這個問題，來看一下code splitting的第二個做用：按需加載。修改一下list.js：

var text = require("./common"); alert(text); alert("I'm list"); if(document.getElementById("container")){ require.ensure([], function(){ var $ = require("jquery"); $("body").css("background-color", "#aaaaaa"); }, "jquery"); }

只有當頁面存在container元素的時候，纔去加載jquery。由於list.html是一個空頁面，不包含id爲container的元素。所以，並不會加載jquery。再次執行webpack，打開list.html會發現頁面沒有再插入script標籤。

從list.js中刪除掉if判斷語句，再按上面相同的方式改寫一下detail.js，而後對detail.js執行webpack。那麼很快就會發現第二個問題：1.detail.js中也包含了jquery。這樣的話，多個文件的共同部分只是拆分，而沒有合併。

當使用config配置文件時，則很好解決上面的問題。除此之外，使用配置文件也在運行webpack時也省去了不少的輸入。

使用config配置文件

如今，在項目根目錄下建立一個配置文件：webpack.config.js。

var src = "./src/js/", dist = "./dist/js/"; module.exports = { entry: { list: src + "list", detail: src + "detail" }, output:{ filename:"[name].js", chunkFilename:"[name].chunk[id].js", path: dist, publicPath: dist } };

這個配置文件是一個純粹的js文件，因此你能夠寫一些應用邏輯進去。注意到這幾個配置項：

• entry：輸入，當爲對象時，key爲chunk的名稱，值爲模塊路徑。
• output.filename：輸出的js文件名。
• output.chunkFilename：輸出的chunk文件名。
• path：輸出的文件路徑。
• publicPath：頁面應用的路徑（即上一小節報錯的路徑）。

配置完成後，執行一下命令行：

D:\webpack-tutorial>webpack --display-modules --display-chunks Hash: 2ba5904a636a8ac64101 Version: webpack 1.13.0 Time: 856ms Asset Size Chunks Chunk Names detail.js 3.96 kB 0 [emitted] detail jquery.chunk1.js 267 kB 1 [emitted] jquery list.js 4.01 kB 2 [emitted] list chunk {0} detail.js (detail) 267 bytes [rendered] [0] ./src/js/detail.js 204 bytes {0} [built] [1] ./src/js/common.js 63 bytes {0} {2} [built] chunk {1} jquery.chunk1.js (jquery) 259 kB {0} {2} [rendered] [2] ./~/jquery/dist/jquery.js 259 kB {1} [built] chunk {2} list.js (list) 311 bytes [rendered] [0] ./src/js/list.js 248 bytes {2} [built] [1] ./src/js/common.js 63 bytes {0} {2} [built]

能夠看到生成了三個文件：jquery.chunk1.js，包含了jquery.js（配置文件中的[name]即爲require.ensure方法中的第三個參數）；detail.js和list.js。下面再次打開list.html，發現上一節的兩個問題都已經解決了。

使用CommonsChunkPlugin

在上面的例子中，咱們使用Code Splitting將公共的jquery.js生成到了 jquery.chunk1.js 中，並能夠進行按需加載（動態將script標籤插入到頁面head中）。

若是想將公共的js打包到同一個js文件中，而後手動添加到頁面中，則可使用CommonsChunkPlugin插件。

修改webpack.config.js配置文件：

var webpack = require("webpack"); module.exports = { plugins:[ new webpack.optimize.CommonsChunkPlugin({ name: 'lib', minChunks: 2 }) ] };

爲了讓文章緊湊一點，配置文件中相同的地方沒有再列出來了，下同。

從新執行webpack：

D:\webpack-tutorial>webpack --display-modules --display-chunks Hash: 881d51e5a0d94bc015bc Version: webpack 1.13.0 Time: 858ms Asset Size Chunks Chunk Names detail.js 265 bytes 0 [emitted] detail list.js 262 bytes 1 [emitted] list lib.js 271 kB 2 [emitted] lib chunk {0} detail.js (detail) 155 bytes {2} [rendered] [0] ./src/js/detail.js 155 bytes {0} [built] chunk {1} list.js (list) 152 bytes {2} [rendered] [0] ./src/js/list.js 152 bytes {1} [built] chunk {2} lib.js (lib) 259 kB [rendered] [1] ./src/js/common.js 63 bytes {2} [built] [2] ./~/jquery/dist/jquery.js 259 kB {2} [built]

能夠看到生成了三個文件 detail.js、list.js和 lib.js，其中lib.js包含了 common.js 和 jquery.js。

此時，要記得修改list.html和detail.html，將lib.js手動引入進來：

<script src="dist/js/lib.js"></script> <script src="dist/js/list.js"></script>

若是咱們但願只將jquery和其餘第三方庫打包到lib中（不包含common.js），則能夠這樣配置webpack.config.js：

var webpack = require("webpack"); module.exports = { entry: { lib: ["jquery"], // 其餘的庫，能夠包含多個 list: src + "list", detail: src + "detail" }, plugins:[ new webpack.optimize.CommonsChunkPlugin({ name: 'lib', minChunks: Infinity }) ] };

運行結果以下：

D:\webpack-tutorial>webpack --display-modules --display-chunks Hash: c0a9b7c514a8a8ad5585 Version: webpack 1.13.0 Time: 839ms Asset Size Chunks Chunk Names detail.js 385 bytes 0 [emitted] detail lib.js 271 kB 1 [emitted] lib list.js 382 bytes 2 [emitted] list chunk {0} detail.js (detail) 218 bytes {1} [rendered] [0] ./src/js/detail.js 155 bytes {0} [built] [1] ./src/js/common.js 63 bytes {0} {2} [built] chunk {1} lib.js (lib) 259 kB [rendered] [0] multi lib 28 bytes {1} [built] [2] ./~/jquery/dist/jquery.js 259 kB {1} [built] chunk {2} list.js (list) 215 bytes {1} [rendered] [0] ./src/js/list.js 152 bytes {2} [built] [1] ./src/js/common.js 63 bytes {0} {2} [built]

能夠看到list.js和detail.js中都包含了common.js，而lib.js中包含了第三方的jquery.js。這樣作的好處是：能夠把第三方庫總體打包作CDN，而不會受到可能頻繁變更的common.js的影響。

使用 Webpack Loader處理多種資源

Webpack Loader有點相似於一個管道，用來加強Webpack的能力。若是咱們須要解析scss代碼，就須要scss-loader，通過這個管道之後scss就轉換爲了css；若是須要解析ES6代碼，就須要babel-loader，通過這個管道之後ES6就轉換爲了ES5。等等，以此類推。

引入樣式

咱們先看第一個loader：css loader。它用來將樣式表引入到當前文件中。

先進行一下準備工做：

• 在src/css/文件夾下建立一個list.css文件，裏面就一行代碼：body{background: #aaa;}
• 由於如今已經再也不演示處理多文件了，因此在webpack.config.js中刪去detail: src + "detail" 這行。
• 刪掉src/js/list.js中的全部代碼

安裝css-loader：

npm install css-loader --save-dev

修改list.js

require("css!../css/list.css");

運行一遍webpack，能夠看到dist/js/list.js將list.css包含了進去：

D:\webpack-tutorial>webpack --display-modules --display-chunks Hash: a669b2f88986bbfd0da0 Version: webpack 1.13.0 Time: 585ms Asset Size Chunks Chunk Names list.js 3.29 kB 0 [emitted] list chunk {0} list.js (list) 1.73 kB [rendered] [0] ./src/js/list.js 35 bytes {0} [built] [1] ./~/css-loader!./src/css/list.css 186 bytes {0} [built] [2] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]

這時候，若是打開list.html，會發現什麼變化都沒有，這是由於css-loader的做用僅僅是將css文件鏈入到腳本中，卻不對它作任何處理。

此時，若是但願將樣式的內容渲染到頁面上，則須要安裝另外一個loader：style-loader。

顯然，設計原則是：一個loader只幹一件事。

npm install style-loader --save-dev

接着修改list.js

require("style!css!../css/list.css");

這是一個鏈式語法，意思是：先用css-loader加載list.css文件，而後再用style-loader渲染它。

再次運行webpack，而後打開list.html，發現頁面已經加載了list.css樣式，頁面背景變成了灰色(#aaa)。

用Chrome瀏覽器查看頁面源碼，會發現樣式是嵌入到list.js中去的，而不是經過link標籤引入到頁面中。這樣就會帶來一個問題：頁面閃爍。當你頻繁刷新頁面時，會發如今腳本加載完成前，頁面是默認的白色，等到腳本加載完成後才變成灰色。

對一個Web組件而言，它應當包含HTML結構，CSS樣式表，JS腳本控制行爲，還可能包含字體和圖片。這些統稱爲資源assets，它們通通能夠經過Webpack打包成一個js文件。若是是開發一個Web組件，這麼作一般沒有太大問題，由於Web組件只是頁面的一小塊區域。但若是是全局的樣式，資源加載前帶來的閃爍問題則會影響用戶體驗。
將圖片和HTML打包到js中，也須要相應的loader，這裏就不在演示了。

如此一來，咱們但願將css文件生成到dist/css文件夾中，再經過傳統的方式用link標籤進行引用，而不是生成到list.js腳本中。如今，從新編輯一下webpack.config.js：

var src = "./src/js/", dist = "./dist/js/"; module.exports = { entry: { list: src + "list" }, output:{ filename:"[name].js", chunkFilename:"[name].chunk[id].js", path: dist, publicPath: dist }, module:{ loaders:[ { test: /\.css$/, loaders:["style", "css"] } ] } };

這裏添加了loaders的配置。而後修改list.js：

require("../css/list.css");

而後運行一遍webpack，會發現沒有任何改變，list.css依然是打包進了list.js中。上面修改配置，不過是將loader的使用規則放到了配置中，並無其餘變化。

爲了將css打包到dist/css文件夾，須要另外一個webpack插件：extract-text-webpack-plugin。打開命令行，進行安裝：

npm install extract-text-webpack-plugin --save-dev

而後修改webpack.config.js配置文件：

var src = "./src/js/", dist = "./dist/js/"; var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { list: src + "list" }, output:{ filename:"[name].js", chunkFilename:"[name].chunk[id].js", path: dist, publicPath: dist }, module:{ loaders:[ { test: /\.css$/, loader:ExtractTextPlugin.extract("style", "css") } ] }, plugins:[ new ExtractTextPlugin("../css/[name].css", { allChunks:true }) ] };

再次運行webpack，能夠看到在dist文件夾下生成了list.css文件。注意plugins中new ExtractTextPlugin的參數，第一個參數指定了生成的css文件的位置，這個位置是相對於配置中的output.path（./dist/js/），而不是至關於項目的根目錄(D:\webpack-tutorial)。

修改list.html，在head中引用剛纔生成的css文件，能夠看到一切正常：

<link href="dist/css/list.css" rel="stylesheet" />

上面作了這麼多的工做，至關於將list.css從src/css文件夾拷貝一份到dist/css文件夾，好像並無太大意義。正常狀況下，是在src/css下編寫scss文件，而後生成到dist/css中。可能你已經猜到了，咱們又須要安裝一個loader了：sass-loader。

npm install sass-loader node-sass --save-dev

接着再次修改配置文件：

module:{ loaders:[ { test: /\.css$/, loader:ExtractTextPlugin.extract("style", "css") }, { test: /\.scss$/, loader:ExtractTextPlugin.extract("style", "css!sass") } ] }

在上面多加了一個sass-loader用於處理.scss文件。接着刪除src/css/list.css，而後建立list.scss文件：

$bg-main:#aaa; body{ background:$bg-main; }

修改list.js require("../css/list.scss");。而後再次運行webpack，成功後能夠看到dist/css下生成的css。如此一來，就能夠在項目中編寫scss文件了。

使用Babel處理ES6

2015年推出了ES6（ES2015），惋惜如今瀏覽器的支持頗有限。但好在有Babel這樣的神器，能夠將ES6轉爲如今瀏覽器所支持的ES5。有了上面的經驗，後面就容易不少了，由於都是大同小異的。

先安裝babel-loader和babel-preset-2015：

npm install babel-loader babel-core babel-preset-es2015 --save-dev

可能不少人會問：babel-preset-es2015是作什麼的？簡單說一下，就是babel自己也是啥都作不了，要藉助preset來完成，目的一樣是爲了架構更簡潔吧。

修改webpack.config.js，加入babel-loader：

module:{ loaders:[ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] } } ] }

如今，修改list.js，編寫一段ES6代碼：

var arr = [1,2,3].map(x=> x+1 ); alert(arr);

運行webpack，而後打開dist/js/list.js，會看到lambda表達式 x=>x+1 已經轉爲了匿名函數：

function(module, exports) { "use strict"; var arr = [1, 2, 3].map(function (x) { return x + 1; }); alert(arr); }

引入React

由於咱們選用React做爲前端UI框架，那麼就須要讓Webapck支持它。不一樣的是：React是Babel的一個預設，而非Webpack的一個Loader。如今先安裝它：

npm install react react-dom babel-preset-react --save-dev

這裏react和react-dom是React的核心模塊；babel-preset-react則是用於babel的preset。

接着修改webpack.config.js：

{ test: /\.jsx?$/, loader: 'babel-loader', exclude:/node_modules/, query:{ presets: ['es2015', "react"] } }

在src/jsx文件夾下建立一個hello.jsx，用於測試React：

var React = require("react"); var ReactDOM = require("react-dom"); var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render(<HelloMessage name="張子陽" />, document.getElementById("container"));

修改src/js/list.js：

import Hello from "../jsx/hello.jsx";

這裏不能夠require，只能import。

修改list.html，在body中加入一行代碼：<div id="container"></div>。打開list.html，會看到 「Hello 張子陽」的字樣。

生成的dist/js/list.js會變得很是龐大，由於包含了不少react的代碼，可使用前面提到的功能生成多個文件，這裏就再也不演示了。

總結

這篇文章中只能算做流程攻略，而非詳情解說。先掌握最經常使用的功能，高級功能須要的時候再研究就行了。如今簡短地回顧一下：咱們先配置了webpack的環境，經過使用命令行來運行webpack，而後學習了代碼分拆(Code splitting)、使用配置文件和提取公共代碼。最後，經過安裝和配置loader完成了對sass、ES6以及React的支持。下面就開始歡快地編碼吧！

感謝閱讀，但願這篇文章能給你帶來幫助！