webpack常用配置總結

1. webpack簡介

webpack 是一個模塊打包工具。它使得模塊相互依賴並且可構建等價於這些模塊的靜態資源。相比於已經存在的模塊打包器（module bundler），webpack的開發動機是實現代碼分包（Code Splitting ）和通過模塊化完成代碼的無縫集成。webpack可以根據項目需求合並代碼，並且支持按需加載。

webpack入門，可以參看：petehunt的Webpack howto

webpack的實現目標是：

• 拆分依賴樹（dependency tree）為多個按需加載的chunk
• 保證快速首屏加載
• 每種靜態資源都可成為模塊
• 能夠將第三方庫視作一個模塊來處理
• 能夠定制模塊打包器的幾乎任何部分
• 適合大型項目

2. webpack基本使用

安裝webpack之前，請確認node已經安裝完畢，且npm包管理器可用。

2.1 全局安裝webpack

 

 

1 2	npm  install  webpack -g

 

2.2 全局安裝 webpack-dev-server

 

 

1 2	npm install webpack-dev-server -g

 

2.3 項目搭建

在項目的根目錄下運行：

 

 

1 2	npm install webpack

 

在項目根目錄下新建webpack.config.js。我們通過這個文件來處理控制webpack，給出我們想要的輸出。

webpack.config.js的簡單的配置如下：

 

 

1 2 3 4 5 6 7 8 9

module.exports = {     context: __dirname + '/src',     entry: './index/index.js',     output: {         path: __dirname + '/build',         filename: 'bundle.js'     } };

 

2.4 開發調試

項目根目錄運行：

 

 

1 2	webpack-dev-server --progress --colors

 

此時，訪問： http://localhost:8080/index.bundle.js 即可訪問到編譯之后的js了。

2.5 產品發布

通過webpack打包發布，運行：

 

 

1 2	webpack -p

 

按照我們上面的webpack.config.js文件的配置，打包成功之后會生成一個build文件夾，里面會包含打包好的js文件，集成了所有的依賴庫和業務邏輯代碼，我們只需將此build文件夾發布到線上即可。

至此一個完整流程的webpack運行流程梳理完畢，當然webpack還有很多功能來實現我們開發中所遇到的各種變態需求，在第三章中我抽出了一些項目中常用的功能。

3. 常用功能

3.1 設置入口

配置那些js需要處理，entry有三種寫法，每個入口稱為一個chunk。

• 字符串：
  entry: "./index/index.js" ：配置模塊會被解析為模塊，並在啟動時加載。chunk名為默認為main， 具體打包文件名視output配置而定。

   

• 數組
  entry: ['./src/mod1.js', [...,] './src/index.js'] ：所有的模塊會在啟動時 按照配置順序 加載，合並到最后一個模塊會被導出。chunk名默認為main

• 對象
  entry: {index: '...', login : [...] }：如果傳入Object，則會生成多個入口打包文件， key是chunk名，value可以是字符串，也可是數組。

例如

 

 

1 2 3 4 5

entry: {     index: './index/index.js',     login: ['./mod/mod1.js', './index/login.js'] }

 

3.2 配置輸出目錄

設置入口配置的文件的輸出規則，通過output對象實現，常用設置：

 

 

1 2 3 4 5 6

output: {     path: __dirname + '/build',     filename: '[name]-[id].js',     publicPath: '/asstes/' }

 

其中：

• output.path ：指定輸出文件路徑，通常設置為__dirname + ‘/build’,
• output.filename: 輸出文件名稱，有下面列出的四種可選的變量。 filename項的配置可以是這幾種的任意一種或多種的組合。 如 output.filename = ‘[name]-[id].js’, 則輸出就是 index-1.js、 login-2.js。
  • [id], chunk的id
  • [name] ,chunk名
  • [hash], 編譯哈希值
  • [chunkhash] , chunk的hash值
• output.publicPath：設置為想要的資源訪問路徑。訪問時，則需要通過類似http://localhost:8080/asstes/index-1.js來訪問資源，如果沒有設置，則默認從站點根目錄加載。

   

3.3 設置loader

loader是webpack中比較重要的部分，她是處理各類資源的執行者。它們是一系列的函數（運行在node.js中），將資源中的代碼作為參數，然后返回新的代碼。你可以用loader告訴webpack可以加載哪些文件，或者不加載哪些文件。

Loader的特點

• 可以鏈式執行。它們在一個管道中被提交，只需要保證最后的loader返回JavaScript即可，其他loader可以返回任意方便下一個loader處理的內容。
• 可以異步or同步執行
• 運行在Node.js中，可以做幾乎任何事兒
• 可以接收query參數，用於向loader傳遞參數
• 配置中可與正則/擴展結合使用
• 可以在npm中發布並使用
• 除了main,其他模塊可以導出成loader
• 可以通過配置調入
• 和插件（plugins）配合可獲得更多功能
• 可生成其他格式文件

安裝loader

 

 

1 2	npm install xxx-loader --save

 

或者

 

 

1 2	npm install xxx-loader --save-dev

 

其中，XXX為webpack支持的loader名，常用的有：html、css、jsx、coffee、jade、less、sass、style等。
你可以通過webpack loader 列表 查看所有支持的loader。當然你可以自己根據需求創建並發布loader。

配置loader

 

 

1 2 3 4 5 6 7 8 9 10 11 12

modules: {     loaders: [         {             test: /\.js$/, //匹配希望處理文件的路徑             exclude: /node_modules/, // 匹配不希望處理文件的路徑             loaders: 'xxx-loader?a=x&b=y'  //此處xxx-loader 可以簡寫成xxx , ？后以query方式傳遞給loader參數         },         ...     ] }

 

多loader調用示例:

在js中，如果要直接解析某個文件，你可以采用：

 

 

1 2	require('jade!./index.jade')

 

如果要解析css，並內聯之，需要使用到分隔符 !

 

 

1 2	require(!style!css!./style.css)

 

同理，如果要解析less， 轉換成css之后，再內聯之，寫法如：

 

 

1 2	require('!style!css!less!./style.less!') ; // 此語句的含義是，先調用less-loader解析style.less文件，輸出結果會被css-loader處理, 然后再被style-loader處理

 

同理，在webpack.config.jsp配置文件中，只需要制定處理的loader序列：
即：

 

 

1 2 3 4 5 6 7 8 9

... loaders: [     {             test: /\.less$/,             loader: "style!css!less"         } ] ...

 

本章會介紹比較常用的loader的配置方法。

3.3.1 解析並抽取css

在webpack中css默認方案是，將css編譯並通過內聯的方式在html頁面中插入<style>樣式標簽。當然這遠遠不能滿足我們的要求，webpack提供css-loader模塊用於編譯css文件，並且提供了插件extract-text-webpack-plugin將css從js代碼中抽出並合並。你可以訪問此處,查看文檔和例子。
這樣你可以在模塊中，盡情使用 require(style.css), webpack會幫你做解析，合並entry中定義js及其依賴中所用到的所有css，然后生成一個指定的css文件。

配置如下：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<br />var ExtractTextPlugin = require('extract-text-webpack-plugin');   ... module: {     loaders: [         {             test: /\.css$/,             loader: ExtractTextPlugin.extract(                 "style-loader",                 "css-loader?sourceMap"             )         }, {             test: /\.less$/,             loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")         }     ]   }, plugins: [     new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {         disable: false,         allChunks: true     }) ] ...

 

3.3.2 處理圖片、字體等文件

在css中或者js邏輯中，都會涉及到require圖片的情況，webpack可以內聯圖片地址到打包js中並且通過require()返回圖片路徑。當然，不只是圖片，還有css中用到的iconfont，特殊情況用到的flash等，都可以相似處理。這里，我們需要用到url-loader 或 file-loader。

• file-loader: 將匹配到的文件復制到輸出文件夾，並根據output.publicPath的設置返回文件路徑
• url-loader: 類似file-loader ,但是它可以返回一個DataUrl (base 64)如果文件小於設置的限制值limit。

同樣，這之前，你需要實現配置相關loader。

安裝url-loader 和 file-loader:

 

 

1 2	npm install url-loader file-loader --save

 

配置：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

module:{     loaders:[         {             test: /\.(png|jpg)$/,             loader: 'url-loader?limit=8192' //  <= 8kb的圖片base64內聯         },             {                 test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10000&minetype=application/font-woff'             },             {                 test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10&minetype=application/font-woff'             },             {                 test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10&minetype=application/octet-stream'             },             {                 test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'file'             },             {                 test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10&minetype=image/svg+xml'             }     ] }

 

通過向url-loader傳遞參數，如果圖片小於8kb，則base64內聯，大於8kb，則通過output.publishPath配置的前綴將圖片路徑寫入代碼，並提取圖片到輸出目錄。

3.3.3 解析JSX

在React項目中，需要解析JSX和相關JavaScript文件，需要下載loader：

 

 

1 2	npm install react-hot-loader jsx-loader --save

 

同樣，配置loader:

 

 

1 2 3 4 5 6 7 8 9 10

... loaders: [        {            test: /\.js$/,            exclude: /node_modules/,            loader: 'react-hot!jsx-loader?harmony'        }    ]    ...

 

3.3.4解析VUE

和React項目類似，如果要解析VUE框架編寫的.vue文件，需要下載loader:

 

 

1 2	npm install vue-loader --save

 

配置loader:

 

 

1 2 3 4 5 6 7

loaders: [   {       test: /\.vue$/,       loader: 'vue-loader'   } ]

 

但需要注意的是，如果你的代碼中用到了如jade，less等其他語法，可能需要提前下載相應loader到本地。vue-loader的介紹可以查看： vue-loader

3.3.5 解析ES6語法

babel可以讓我們在編寫代碼的時候，使用更高級的ECMAScript6的語法。然后我們編寫的JS文件可以被編譯成可被低版本瀏覽器處理的常規代碼。

使用方法
安裝loader:

 

 

1 2	npm install babel-loader --save

 

配置loader:

 

 

1 2 3 4 5 6 7 8

loaders: [   {       test: /\.js$/,       exclude: /node_modules/,       loader: 'babel'   } ]

 

例如:

 

 

1 2 3 4 5 6 7 8 9 10 11

const a = 1;   console.log(a);   if (true) {     let a = 3;     console.log(a); }   console.log(a);

 

解析為：

 

 

1 2 3 4 5 6 7 8 9 10 11

var a = 1;   console.log(a);   if (true) {     var _a = 3;     console.log(_a); }   console.log(a);

 

3.4 其他

####3.4.1 借助web_modules引用外部庫
有些時候，我們用到的第三方庫並沒有采用CommonJS或AMD規范，也沒有提交到npm。這樣的話，我們無法通過npm來下載，並通過require()來引用這些庫。
webpack給我們提供了一個很好的實現方式。我們可以在項目根目錄下，創建一個叫做web_modules的文件夾，然后將需要用到的第三方庫存放在此處。那么之后，不需要做任何設置，可以在我們的邏輯代碼中使用require(
‘xx-lib.js’)並且使用了。

文件組織如下：

此時，我們就可以在業務邏輯中，大膽地使用web_modules中配置的庫了，打包的時候，webpack會自動將web_modules中被用到的庫封裝。

**例如： **

 

 

1 2 3 4

var director = require('director')     var Router = director.Router();     ...

 

3.4.2 去除多個文件中的頻繁依賴

當我們經常使用React、jQuery等外部第三方庫的時候，通常在每個業務邏輯JS中都會遇到這些庫。
如我們需要在各個文件中都是有jQuery的$對象，因此我們需要在每個用到jQuery的JS文件的頭部通過require('jquery')來依賴jQuery。 這樣做非常繁瑣且重復，因此webpack提供了我們一種比較高效的方法，我們可以通過在配置文件中配置使用到的變量名，那么webpack會自動分析，並且在編譯時幫我們完成這些依賴的引入。

webpack.config.js中：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var webpack = require('webpack');   ... plugins: [    new webpack.ProvidePlugin({        'Moment': 'moment',        "$": "jquery",        "jQuery": "jquery",        "window.jQuery": "jquery",        "React": "react"    }) ] ...

 

這樣，我們在JS中，就不需要引入jQuery等常用模塊了，直接使用配置的這些變量，webpack就會自動引入配置的庫。

3.4.3 開發環境與發布環境配置

某些情況，我們需要在頁面中輸出開發調試內容，但是又不想讓這些調試內容在發布的時候泄露出去，那么我們可以采用魔力變量(magic globals)來處理。

配置文件：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var webpack = require('webpack');   var definePlugin = new webpack.DefinePlugin({     __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),     __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'true')) });   ...   plugins: [     definePlugin ] ...

 

業務邏輯代碼中寫入
按照下面的代碼寫入，我們就可以在我們自己設定的環境下進行更具針對性的調試。比如我們希望在開發環境下可以AJAX可以調試本地mock數據，然后在發布的時候，可以正常訪問服務端數據。那么通過此種方式可以完全實現。

 

 

1 2 3 4 5 6 7 8 9 10 11 12

if (__DEV__) {     console.warn('Extra logging');     //開發環境需要進行的處理     //... }   if (__PRERELEASE__) {     console.log('prerelease');     //預發環境需要進行的處理    //... }

 

設置環境命令

要告訴webpack我們希望當前是什么環境，只需要在命令中寫入 BUILD_DEV=1 webpck 那么webpack通過配置，就會將所有我們引用到的__DEV__變量設置為true。

我們可以在package.json中事先定義好命令：

 

 

1 2 3 4 5

"scripts": {     "dev": "BUILD_DEV=1 webpack-dev-server --progress --colors",     "build": "BUILD_PRERELEASE=1 webpack -p"   }

 

那么就可以避免輸入冗長的命令了：

開發時輸入：

 

 

1 2	npm run dev

 

發布時輸入:

 

 

1 2	npm run build

 

3.4.5 合並公共代碼

項目中，對於一些常用的組件，站點公用模塊經常需要與其他邏輯分開，然后合並到同一個文件，以便於長時間的緩存。要實現這一功能，配置參照:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<br />var webpack            = require('webpack'); var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;   ... entry: {    a: './index/a.js',    b: './idnex/b.js',    c: './index/c.js',    d: './index/d.js' }, ... plugins: [    new CommonsChunkPlugin('part1.js', ['a', 'b']),    new CommonsChunkPlugin('common.js', ['part1', 'c']) ] ...

 

##4 使用devtool調試

可以通過在配置中加入devtool項，選擇預設調試工具來提高代碼調試質量和效率：

• eval – 每個模塊采用eval和 //@ sourceURL 來執行
• source-map – sourceMap是發散的，和output.sourceMapFilename協調使用
• hidden-source-map – 和source-map類似，但是不會添加一個打包文件的尾部添加引用注釋
• inline-source-map – SourceMap以DataUrl的方式插入打包文件的尾部
• eval-source-map – 每個模塊以eval方式執行並且SourceMap以DataUrl的方式添加進eval
• cheap-source-map – 去除column-mappings的SourceMap， 來自於loader中的內容不會被使用。
• cheap-module-source-map – 去除column-mappings的SourceMap, 來自於loader中的SourceMaps被簡化為單個mapping文件

各種模式的對比：

devtool	構建速度	再次構建速度	支持發布版	質量
eval	+++	+++	no	生成代碼
cheap-eval-source-map	+	++	no	轉換代碼(lines only)
cheap-source-map	+	o	yes	轉換代碼(lines only)
cheap-module-eval-source-map	o	++	no	源代碼 (lines only)
cheap-module-source-map	o	–	yes	源代碼(lines only)
eval-source-map	—	+	no	源代碼
source-map	—	—	yes	源代碼

5. 一個常用的配置

為了方便大家摘取，和補全文章中用於示例的代碼片段，特將配置文件整理如下，作參考：

配置文件:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

var webpack            = require('webpack'); var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; var ExtractTextPlugin  = require('extract-text-webpack-plugin');     //自定義"魔力"變量 var definePlugin = new webpack.DefinePlugin({     __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),     __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')) });     module.exports = {     //上下文     context: __dirname + '/src',     //配置入口     entry: {         a: './view/index/index.js',         b: './view/index/b.js',         vender: ['./view/index/c.js', './view/index/d.js']     },     //配置輸出     output: {         path: __dirname + '/build/',         filename: '[name].js?[hash]',         publicPath: '/assets/',         sourceMapFilename: '[file].map'     },     devtool: '#source-map',     //模塊     module: {         loaders: [             {                 //處理javascript                 test: /\.js$/,                 exclude: /node_modules/,                 loader: 'babel'             }, {                 test: /\.css$/,                 loader: ExtractTextPlugin.extract(                     "style-loader",                     "css-loader?sourceMap"                 )             }, {                 test: /\.less$/,                 loader: ExtractTextPlugin.extract(                     "style-loader",                     "css-loader!less-loader"                 )             }, {                 test: /\.(png|jpg)$/,                 loader: 'url-loader?limit=1024'             }, {                 //處理vue                 test: /\.vue$/,                 loader: 'vue-loader'             },             {                 test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10000&minetype=application/font-woff'             },             {                 test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10&minetype=application/font-woff'             },             {                 test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10&minetype=application/octet-stream'             },             {                 test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'file'             },             {                 test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,                 loader: 'url?limit=10&minetype=image/svg+xml'             }         ]       },     plugins: [         //公用模塊         new CommonsChunkPlugin('common.js', ['a', 'b']),         //設置抽出css文件名         new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {             disable: false,             allChunks: true         }),         //定義全局變量         definePlugin,         //設置此處，則在JS中不用類似require('./base')引入基礎模塊， 只要直接使用Base變量即可         //此處通常可用做，對常用組件，庫的提前設置         new webpack.ProvidePlugin({             Moment: 'moment', //直接從node_modules中獲取             Base: '../../base/index.js' //從文件中獲取         })     ],     //添加了此項，則表明從外部引入，內部不會打包合並進去     externals: {         jquery: 'window.jQuery',         react: 'window.React',         //...     } };

 

參考資料:

1. Webpack 入門指迷
2. Webpack官方文檔

 

閱讀原文請點擊此處