摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過這個(gè)插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件

本文是針對(duì)TCM項(xiàng)目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項(xiàng)和插件使用，對(duì)以后的項(xiàng)目有指導(dǎo)意義。
TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、webapck.config.prod.js三個(gè)基本文件， webpack.config.base.js是基本配置文件，webpack.config.dev.js是開發(fā)配置，webpack.config.prod.js是產(chǎn)品配置文件，webpack.config.base.js包含一些webpack.config.prod.js和webpack.config.base.js共有的基本配置，而webpack.config.prod.js和webpack.config.base.js在webpack.config.base.js的基礎(chǔ)上添加了一些必要配置。為了引入Node的express API，通過dev.js和prod.js對(duì)頂層配置進(jìn)行定義，因此，package.json文件的scripts部分定義了采用不同配置進(jìn)行開發(fā)的npm指令：

以下較多內(nèi)容是對(duì)《入門Webpack，看這篇就夠了》做的總結(jié)，加入很多網(wǎng)上收集的資料，目的是為了更深的了解TCM中的WebPack配置。

Node.js的發(fā)展使各種依賴廣泛涌現(xiàn)，這些依賴包含各種插件、加載器，可以簡化開發(fā)流程。模塊化是前端發(fā)展的一大趨勢，基于React的單頁應(yīng)用完美詮釋了模塊化的概念，通過組件的方式進(jìn)行開發(fā)，組件之間互相引用，并且引用外部依賴。為了打包外部依賴以及本地JavaScript模塊、SCSS模塊、圖片等，打包工具應(yīng)運(yùn)而生，以WebPack最為著名，類似的還有Gulp/Grunt等。webpack的優(yōu)點(diǎn)之一就是把所有文件，包括CSS、HTML、圖片、JavaScript代碼等都視為模塊處理，只要配置中包含相應(yīng)的loader就可以進(jìn)行處理打包。

其實(shí)Webpack和另外兩個(gè)并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點(diǎn)使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類似編譯，組合，壓縮等任務(wù)的具體步驟，這個(gè)工具之后可以自動(dòng)替你完成這些任務(wù)。

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。

webpack有一個(gè)默認(rèn)的配置文件webpack.config.js（官方文檔），位于項(xiàng)目根目錄，也可以根據(jù)需要?jiǎng)?chuàng)建多個(gè)配置文件，TCMngr配置了三個(gè)文件：webpack.base.conf.js/webpack.dev.config.js/webpack.prod.conf.js。在package.json的scripts中添加不同的命令設(shè)置不同的配置文件，在TCMngr的package.json中有

  "scripts": {
    "start": "cross-env NODE_ENV=development node build/dev.js",
    "build": "cross-env NODE_ENV=production node build/prod.js"
  },

可以看到此處使用了cross-env依賴包，這個(gè)包允許以UNIX的方式設(shè)置環(huán)境變量，并在windows上正常運(yùn)行。安裝命令：

    npm install cross-env --save-dev

webpack配置文件本質(zhì)就是一個(gè)JavaScript module，可以使用JavaScript語言，文件會(huì)導(dǎo)出一個(gè)配置對(duì)象，格式如下：

mudule.exports = {};

所有的配置信息都在這個(gè)對(duì)象中體現(xiàn)，包括：
entry:打包的入口文件，可以使一個(gè)字符串或一個(gè)對(duì)象，如果只有一個(gè)需要打包的模塊，使用這種形式；如果是一個(gè)對(duì)象，對(duì)象對(duì)應(yīng)的所有文件都被打包，該對(duì)象可以是包含多個(gè)打包模塊的數(shù)組，依賴較強(qiáng)的排在前面，也可以是鍵值對(duì)，分別對(duì)應(yīng)不同的輸出包，包名就是鍵名；TCM的webpack.base.conf.js指出了需要打包的文件，包含框架、類庫以及入口源碼。

resolve：影響模塊解析的設(shè)置，是一個(gè)對(duì)象，包含以下屬性。

resolve.extensions:自動(dòng)識(shí)別的文件擴(kuò)展名，如果你想請(qǐng)求一個(gè)js文件但是在請(qǐng)求時(shí)不帶擴(kuò)展        
（如：require("index")）,那么就需要將".js"添加到數(shù)組中。并不是必須配置這一選項(xiàng)，不配
置時(shí)會(huì)使用默認(rèn)值["", ".webpack.js", ".web.js", ".js"]，手動(dòng)設(shè)置會(huì)導(dǎo)致默認(rèn)值被覆
蓋。如果想要每個(gè)模塊都能按照自己的擴(kuò)展名解析，要加上空字符串。
resolve.modulesDirectories：目錄名組成的數(shù)組，會(huì)在該目錄以及該目錄的頂層目錄尋找依賴
模塊，默認(rèn)值是Default: ["web_modules", "node_modules"]。
resolve.root：包含依賴模塊的絕對(duì)路徑，可能是目錄數(shù)組

resolveLoader：設(shè)置和resolve設(shè)置類似，只不過是針對(duì)loaders設(shè)置。

output：打包的輸出結(jié)果，是一個(gè)對(duì)象，包含以下屬性：

filename:輸出文件名，filename里面的[name]會(huì)由entry中的鍵替換；
path:輸出路徑；
publicpath:通過瀏覽器訪問時(shí)的公共URL地址。

module：定義對(duì)模塊的處理邏輯，是一個(gè)對(duì)象;
loaders:定義一系列自動(dòng)加載的loader，是一個(gè)對(duì)象數(shù)組；

    [
        {
            test：正則表達(dá)式，用于匹配處理的文件
            loader/loaders:字符串或數(shù)組，表示用到的加載器，loader:string表示用!分隔的loader，loaders:[]表示用到的加載器數(shù)組。
            include:包含的文件夾
            exclude:排除的文件夾
        }
    ]

plugins:定義插件，一個(gè)數(shù)組，定義所有用到的插件。

externals：當(dāng)我們想在項(xiàng)目中require一些其他的類庫或者API，而又不想讓這些類庫的源碼被打包時(shí)，這在實(shí)際開發(fā)中很有必要。此時(shí)我們就可以通過配置externals參數(shù)來解決這個(gè)問題：

這樣我們就可以放心的在項(xiàng)目中使用這些API了：var jQuery = require(“jquery”);

devtool：選擇調(diào)試工具，常用eval-source-map

//實(shí)例
{
    devtool: "#inline-source-map"
}

插件（Plugins）是用來拓展Webpack功能的，它們會(huì)在整個(gè)構(gòu)建過程中生效，執(zhí)行相關(guān)的任務(wù)。Loaders和Plugins常常被弄混，但是他們其實(shí)是完全不同的東西，可以這么來說，loaders是在打包構(gòu)建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個(gè)，插件并不直接操作單個(gè)文件，它直接對(duì)整個(gè)構(gòu)建過程其作用。要使用某個(gè)插件，我們需要通過npm安裝它，然后要做的就是在webpack配置中的plugins關(guān)鍵字部分添加該插件的一個(gè)實(shí)例（plugins是一個(gè)數(shù)組）。

一般安裝在devDependency中：
npm install webpack-dev-server --save-dev
安裝后使用webpack-dev-server即可在瀏覽器窗口觀察輸出，瀏覽器會(huì)自動(dòng)打開項(xiàng)目根目錄的index.html文件，默認(rèn)端口號(hào)是8080，完整地址是http://localhost:8080/。使用命令webpack-dev-server --hot --inline完成自動(dòng)刷新，為了簡寫命令，在package.json的scripts中添加如下語句：

“build” : “webpack-dev-server --hot --inline --config ‘webpack-dev-config.js’”

--config設(shè)置默認(rèn)的webpack配置文件。
devserver作為webpack配置選項(xiàng)中的一項(xiàng)，具有以下配置選項(xiàng)

在webpack.config.js中體現(xiàn)為：

devServer: {
    contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
    colors: true,//終端中輸出結(jié)果為彩色
    historyApiFallback: true,//不跳轉(zhuǎn)
    inline: true//實(shí)時(shí)刷新
  }

WebPack生成source maps，可以對(duì)應(yīng)編譯文件和源文件，使得編譯后的代碼可讀性更高，更容易調(diào)試。配置source maps，需要配置devtool，它有以下四種不同的配置選項(xiàng)，各具優(yōu)缺點(diǎn)，描述如下：

上述選項(xiàng)由上到下打包速度越來越快，不過同時(shí)也具有越來越多的負(fù)面作用，較快的構(gòu)建速度的后果就是對(duì)打包后的文件的的執(zhí)行有一定影響。

在學(xué)習(xí)階段以及在小到中性的項(xiàng)目上，eval-source-map是一個(gè)很好的選項(xiàng)，不過記得只在開發(fā)階段使用它，如下配置

module.exports = {
  devtool: "eval-source-map",//配置生成Source Maps，選擇合適的選項(xiàng)
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

Babel工具包括babel-core/babel-loader/babel-preset-es2015/babel-preset-react,如果使用命令行還要安裝babel-cli。
Babel的配置較為復(fù)雜，反映在webpack.config.js與.babelrc中，webpack.config.js會(huì)自動(dòng)調(diào)用.babelrc中的配置選項(xiàng)。webpack.config.json會(huì)包含以下配置

//webpack.config.js
{
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel"
      }

//.babelrc
{
  "presets": ["react", "es2015"]
}

webpack提供兩個(gè)工具處理樣式表，css-loader 和 style-loader，二者處理的任務(wù)不同，css-loader使你能夠使用類似@import 和 url(...)的方法實(shí)現(xiàn) require()的功能,style-loader將所有的計(jì)算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
Sass 和 Less之類的預(yù)處理器是對(duì)原生CSS的拓展，它們?cè)试S你使用類似于variables, nesting, mixins, inheritance等不存在于CSS中的特性來寫CSS，CSS預(yù)處理器可以這些特殊類型的語句轉(zhuǎn)化為瀏覽器可識(shí)別的CSS語句，在webpack里使用相關(guān)loaders進(jìn)行配置就可以使用了，常用的CSS 處理loaders包括Less Loader、Sass Loader、Stylus Loader。

// TCM中開發(fā)環(huán)境下直接內(nèi)嵌 CSS 以支持熱替換
// autoprefixer自動(dòng)添加前綴的插件
config.module.loaders.push({
  test: /.css$/,
  loader: "style!css!autoprefixer"
}, {
  test: /.less$/,
  loader: "style!css!less!autoprefixer"
}, {
  test: /.scss$/,
  loader: "style!css!sass!autoprefixer"
});

var   BrowserSyncPlugin = require("browser-sync-webpack-plugin");
config.plugins.push(
  new BrowserSyncPlugin({
    host: "127.0.0.1",
    port: 9090,// 瀏覽器監(jiān)聽地址
    proxy: "http://127.0.0.1:9000/",
    logConnections: false,
    notify: false
  }, {
    reload: false
  })
);

使用該插件需要在webpack配置中增加以下聲明：

var NyanProgressPlugin = require("nyan-progress-webpack-plugin");
plugins: [
  new NyanProgressPlugin()  
]

效果如下：

這個(gè)插件的作用是依據(jù)一個(gè)簡單的模板，幫你生成最終的Html5文件，這個(gè)文件中自動(dòng)引用了你打包后的JS文件。每次編譯都在文件名中插入一個(gè)不同的哈希值。

//安裝
npm install --save-dev html-webpack-plugin
//webpack.config.js
var HtmlWebpackPlugin = require("html-webpack-plugin");
config.plugins.push(
new HtmlWebpackPlugin({
    filename: "index.html",
    template: config.commonPath.indexHTML, //載入文件
    chunksSortMode: "auto"
  })
);

該插件的設(shè)置參數(shù)很多：
title: 設(shè)置title的名字
filename: 設(shè)置這個(gè)html的文件名
template:要使用的模塊的路徑
inject: 把模板注入到哪個(gè)標(biāo)簽后 "body",
favicon: 給html添加一個(gè)favicon "./images/favico.ico",
minify:是否壓縮 {...} | false
hash:是否hash化 true false ,
cache:是否緩存,
showErrors:是否顯示錯(cuò)誤,
chunks:目前沒太明白
xhtml:是否自動(dòng)畢業(yè)標(biāo)簽 默認(rèn)false

Hot Module Replacement（HMR）也是webpack里很有用的一個(gè)插件，它允許你在修改組件代碼后，自動(dòng)刷新實(shí)時(shí)預(yù)覽修改后的效果。在webpack中實(shí)現(xiàn)HMR也很簡單，只需要做兩項(xiàng)配置：在webpack配置文件中添加HMR插件；在Webpack Dev Server中添加“hot”參數(shù)。不過配置完這些后，JS模塊其實(shí)還是不能自動(dòng)熱加載的，還需要在你的JS模塊中執(zhí)行一個(gè)Webpack提供的API才能實(shí)現(xiàn)熱加載，雖然這個(gè)API不難使用，但是如果是React模塊，使用我們已經(jīng)熟悉的Babel可以更方便的實(shí)現(xiàn)功能熱加載。Babel有一個(gè)叫做react-transform-hrm的插件，可以在不對(duì)React模塊進(jìn)行額外的配置的前提下讓HMR正常工作。

//webpack中的配置
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
config.plugins.push(
plugins: [
    new webpack.HotModuleReplacementPlugin()//熱加載插件
  ]
);

//安裝react-transform-hmr
npm install --save-dev babel-plugin-react-transform react-transform-hmr
//Babel中的配置
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         "imports": ["react"],
         "locals": ["module"]
       }]
     }]]
    }
  }
}

OccurenceOrderPlugin :為組件分配ID，通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的ID
UglifyJsPlugin：壓縮JS代碼；
ExtractTextPlugin：分離CSS和JS文件