分享：一篇webpack配置基礎絕好文章

Webpack是目前基於React和Redux開發的應用的主要打包工具。我想使用Angular 2或其餘框架開發的應用也有不少在使用Webpack。

當我第一次看到Webpack的配置文件時，它看起來很是的陌生，我很是的疑惑。通過一段時間的嘗試以後我認爲這是由於Webpack只是使用了比較特別的語法和引入了新的原理，所以會讓使用者感到疑惑。這些也是致使Webpack不被人熟悉的緣由。

由於剛開始使用Webpack很讓人疑惑，我以爲有必要寫幾篇介紹Webpack的功能和特性的文章以幫助初學者快速理解。此文是最開始的一篇。

Webpack的核心原理

1. 一切皆模塊

正如js文件能夠是一個「模塊（module）」同樣，其餘的（如css、image或html）文件也可視做模 塊。所以，你能夠require('myJSfile.js')亦能夠require('myCSSfile.css')。這意味着咱們能夠將事物（業務）分割成更小的易於管理的片斷，從而達到重複利用等的目的。

2. 按需加載

傳統的模塊打包工具（module bundlers）最終將全部的模塊編譯生成一個龐大的bundle.js文件。可是在真實的app裏邊，「bundle.js」文件可能有10M到15M之大可能會致使應用一直處於加載中狀態。所以Webpack使用許多特性來分割代碼而後生成多個「bundle」文件，並且異步加載部分代碼以實現按需加載。

好了，下面來看看那些使人困惑的部分吧。

1. 開發模式和生產模式

首先要知道的是Webpack有許許多多的特性，一些是」開發模式「下才有的，一些是」生產模式「下才有的，還有一些是兩種模式下都有的。

一般使用到Webpack如此多特性的項目都會有兩個比較大的Webpack配置文件
複製代碼

爲了生成bundles文件你可能在package.json文件加入以下的scripts項：

"scripts": {
  // 運行npm run build 來編譯生成生產模式下的bundles
  "build": "webpack --config webpack.config.prod.js",
  // 運行npm run dev來生成開發模式下的bundles以及啓動本地server
  "dev": "webpack-dev-server"
 }
複製代碼

2. webpack CLI 和webpack-dev-server

值得注意的是，Webpack做爲模塊打包工具，提供兩種用戶交互接口：

• Webpack CLI tool：默認的交互方式（已隨Webpack自己安裝到本地）

• webpack-dev-server：一個Node.js服務器（須要開發者從npm自行安裝）

Webpack CLI（有利於生產模式下打包）

這種方式能夠從命令行獲取參數也能夠從配置文件（默認叫webpack.config.js）獲取，將獲取到的參數傳入Webpack來打包

固然你也能夠從命令行（CLI）開始學習Webpack，之後你可能主要在生產模式下使用到它。
複製代碼

用法：

方式1: 
// 全局模式安裝webpack
npm install webpack --g
// 在終端輸入
$ webpack // <--使用webpack.config.js生成bundle

方式 2 :
// 費全局模式安裝webpack而後添加到package.json依賴裏邊
npm install webpack --save
// 添加build命令到package.json的scripts配置項
"scripts": {
 "build": "webpack --config webpack.config.prod.js -p",
 ...
 }
// 用法：
"npm run build"
複製代碼

webpack-dev-server（有利於在開發模式下編譯）

這是一個基於Express.js框架開發的web server，默認監聽8080端口。server內部調用Webpack，這樣作的好處是提供了額外的功能如熱更新「Live Reload」以及熱替換「Hot Module Replacement」（即HMR） 用法:

方式 1:
// 全局安裝
npm install webpack-dev-server --save
// 終端輸入
$ webpack-dev-server --inline --hot

用法 2:
// 添加到package.json scripts
"scripts": {
 "start": "webpack-dev-server --inline --hot",
 ...
 }
// 運行： 
$ npm start

// 瀏覽器預覽：
http://localhost:8080
複製代碼

webpack VS Webpack-dev-server選項

注意像inline和hot這些選項是Webpack-dev-server特有的，而另外的如hide-modules則是CLI模式特有的選項。

webpack-dev-server CLI選項和配置項

另外值得注意的是你能夠經過如下兩種方式向webpack-dev-server傳入參數：

• 經過webpack.config.js文件的"devServer"對象

• 經過CLI選項

// 經過CLI傳參
webpack-dev-server --hot --inline
// 經過webpack.config.js傳參
devServer: {
  inline: true,
  hot:true
}
複製代碼

我發現有時devServer配置項（hot: true 和inline: true）不生效，我更偏向使用以下的方式向CLI傳遞參數
// package.json
{
    "scripts": "webpack-dev-server --hot --inline"
}
注意：肯定你沒有同時傳入hot:true和-hot
複製代碼

webpack-dev-server的「hot」 和 「inline」選項

「inline」選項會爲入口頁面添加「熱加載」功能，「hot」選項則開啓「熱替換（Hot Module Reloading）」，即嘗試從新加載組件改變的部分（而不是從新加載整個頁面）。若是兩個參數都傳入，當資源改變時，webpack-dev-server將會先嚐試HRM（即熱替換），若是失敗則從新加載整個入口頁面。

// 當資源發生改變，如下三種方式都會生成新的bundle，可是又有區別：
 
// 1. 不會刷新瀏覽器
$ webpack-dev-server
//2. 刷新瀏覽器
$ webpack-dev-server --inline
//3. 從新加載改變的部分，HRM失敗則刷新頁面
$ webpack-dev-server  --inline --hot
複製代碼

3. 「entry」：值分別是字符串、數組和對象的狀況

Enter配置項告訴Webpack應用的根模塊或起始點在哪裏，它的值能夠是字符串、數組或對象。這看起來可能使人困惑，由於不一樣類型的值有着不一樣的目的。

像絕大多數app同樣，假若你的應用只有一個單一的入口，enter項的值你可使用任意類型，最終輸出的結果都是同樣的。

enter：數組類型

可是，若是你想添加多個彼此不互相依賴的文件，你可使用數組格式的值。

例如，你可能在html文件裏引用了「googleAnalytics.js」文件，能夠告訴Webpack將其加到bundle.js的最後。

用法：

//profile.html
<script src=」dist/profileEntry.js」></script>
//index.html
<script src=」dist/indexEntry.js」></script>
複製代碼

注意：文件名取自「entry」對象的鍵名。

enter：混合類型

你也能夠在enter對象裏使用數組類型，例以下面的配置將會生成3個文件：vender.js（包含三個文件），index.js和profile.js文件。

4. output：「path」項和「publicPath」項

output項告訴webpack怎樣存儲輸出結果以及存儲到哪裏。output的兩個配置項「path」和「publicPath」可能會形成困惑。

「path」僅僅告訴Webpack結果存儲在哪裏，然而「publicPath」項則被許多Webpack的插件用於在生產模式下更新內嵌到css、html文件裏的url值。

例如，在localhost（譯者注：即本地開發模式）裏的css文件中邊你可能用「./test.png」這樣的url來加載圖片，可是在生產模式下「test.png」文件可能會定位到CDN上而且你的Node.js服務器多是運行在HeroKu上邊的。這就意味着在生產環境你必須手動更新全部文件裏的url爲CDN的路徑。

然而你也可使用Webpack的「publicPath」選項和一些插件來在生產模式下編譯輸出文件時自動更新這些url。

5. 模塊加載和鏈式模塊加載

模塊加載器是可自由添加的Node模塊，用於將不一樣類型的文件「load」或「import」並轉換成瀏覽器能夠識別的類型，如js、Stylesheet等。更高級的模塊加載器甚至能夠支持使用ES6裏邊的「require」或「import」引入模塊。

例如，你可使用babel-loader來將使用ES6語法寫成的文件轉換成ES5：

module: {
 loaders: [{
  test: /\.js$/, // 匹配.js文件，若是經過則使用下面的loader
  exclude: /node_modules/, // 排除node_modules文件夾
  loader: 'babel' // 使用babel（babel-loader的簡寫）做爲loader
 }]
複製代碼

鏈式（管道式）的加載器（從右往左執行）

多個loader能夠用在同一個文件上而且被鏈式調用。鏈式調用時從右到左執行且loader之間用「!」來分割。

例如，假設咱們有一個名爲「myCssFile.css」的css文件，而後咱們想將它的內容使用style標籤內聯到最終輸出的html裏邊。咱們可使用css-loader和style-loader兩個loader來達到目的。

module: {
 loaders: [{
  test: /\.css$/,
  loader: 'style!css' //(short for style-loader!css-loader)
 }]
複製代碼

這裏展現它是如何工做的：

1. Webpack在模塊顳部搜索在css的依賴項，即Webpack檢查js文件是否有「require('myCssFile.css')」的引用，若是它發現有css的依賴，Webpack將css文件交給「css-loader」去處理
2. css-loader加載全部的css文件以及css自身的依賴（如，@import 其餘css）到JSON對象裏，Webpack而後將處理結果傳給「style-loader」
3. style-loader接受JSON值而後添加一個style標籤並將其內嵌到html文件裏

6. loader自身能夠配置

模塊加載器（loader）自身能夠根據傳入不一樣的參數進行配置。

在下面的例子中，咱們能夠配置url-loader來將小於1024字節的圖片使用DataUrl替換而大於1024字節的圖片使用url，咱們能夠用以下兩種方式經過傳入「limit「參數來實現這一目的

7. babelrc 文件

babal-loader使用」presets「配置項來標識如何將ES6語法轉成ES5以及如何轉換React的JSX成js文件。咱們能夠用以下的方式使用」query「參數傳入配置：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}
複製代碼

8. 插件

插件通常都是用於輸出bundle的node模塊。

例如，uglifyJSPlugin獲取bundle.js而後壓縮和混淆內容以減少文件體積。

相似的extract-text-webpack-plugin內部使用css-loader和style-loader來收集全部的css到一個地方最終將結果提取結果到一個獨立的」styles.css「文件，而且在html裏邊引用style.css文件。

//webpack.config.js
// 獲取全部的.css文件，合併它們的內容而後提取css內容到一個獨立的」styles.css「裏
var ETP = require("extract-text-webpack-plugin");

module: {
 loaders: [
  {test: /\.css$/, loader:ETP.extract("style-loader","css-loader") }
  ]
},
plugins: [
    new ExtractTextPlugin("styles.css") //Extract to styles.css file
  ]
}
複製代碼

注意：若是你只是想把css使用style標籤內聯到html裏，你沒必要使用extract-text-webpack-plugin，僅僅使用css loader和style loader便可

9. 加載器（loader）和插件

你可能已經意識到了，Loader處理單獨的文件級別而且一般做用於包生成以前或生成的過程當中。

而插件則是處理包（bundle）或者chunk級別，且一般是bundle生成的最後階段。一些插件如commonschunkplugin甚至更直接修改bundle的生成方式。

10. 處理文件的擴展名

不少Webpack的配置文件都有一個resolve屬性，而後就像下面代碼所示有一個空字符串的值。空字符串在此是爲了resolve一些在import文件時不帶文件擴展名的表達式，如require('./myJSFile')或者import myJSFile from './myJSFile'（譯者注：實際就是自動添加後綴，默認是當成js文件來查找路徑）

{
 resolve: {
   extensions: ['', '.js', '.jsx']
 }
}
複製代碼

就這麼多。

轉載自：https://segmentfault.com/a/1190000005089993?utm_source=tuicool&utm_medium=referral