摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。

其實(shí)我不知道怎么寫，所以決定就一塊一塊的寫點(diǎn)平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了

$ mkdir webpack_study
$ cd webpack_study
$ mkdir 0x001-begin
$ cd 0x001-begin

$ node -v
# 輸出
v8.4.0
$ npm -v
# 輸出
v5.4.2
$ cnpm -v
# 輸出
[email protected] (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
[email protected] (/usr/local/bin/node)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 16.7.0 
registry=http://registry.npm.taobao.org

$ cnpm install -g webpack
# 輸出
Downloading webpack to /usr/local/lib/node_modules/webpack_tmp
...
[[email protected]] link /usr/local/bin/webpack@ -> /usr/local/lib/node_modules/webpack/bin/webpack.js

$ webpack -v
# 輸出
3.8.1

這個(gè)栗子使用的是命令行打包形式，純粹用來(lái)做測(cè)試而已，在正式項(xiàng)目中，我們的配置將會(huì)達(dá)到非常復(fù)雜的程度雖然命令行依舊可以實(shí)現(xiàn)，但是將會(huì)帶來(lái)維護(hù)上的和形式上的麻煩，所以我們通常會(huì)采用配置文件的形式。

編寫一個(gè)js文件

# 0x001-begin/src/index.js
console.log("hello webpack")

在0x001-begin文件夾下執(zhí)行命令

$ cd 0x001-begin
$ webpack ./src/index.js ./dist/index.js
# 控制臺(tái)輸出
Hash: d25cd23c431cf01c6a5b
Version: webpack 3.6.0
Time: 53ms
   Asset    Size  Chunks             Chunk Names
index.js  2.5 kB       0  [emitted]  main
   [0] ./src/index.js 29 bytes {0} [built]

此時(shí)查看0x001-begin可以發(fā)現(xiàn)，多了個(gè)dist文件夾，文件夾下有一個(gè)index.js文件,這個(gè)文件就是我們通過webpack打包之后的文件，打開這個(gè)文件，我們可以發(fā)現(xiàn)，里面的代碼都不是我們寫的，這是webpack自動(dòng)生成的，暫時(shí)不管，以后再去分析他，在文件末尾找一找便可以發(fā)現(xiàn)我們寫的那句話也在里面。

...
/***/ (function(module, exports) {
console.log("hello webpack")
/***/ })
...

文件引用
平常我們?cè)谧鲰?xiàng)目的時(shí)候，會(huì)將不同的功能、不同的類寫在不同的文件，使用的時(shí)候互相引用，提升項(xiàng)目的可維護(hù)性和可擴(kuò)展性。

# 0x001-begin/user.js
export default function (first_name, second_name) {
    console.log("hello " + first_name + "-" + second_name)
}
# 0x001-begin/index.js
let getUserName = require("./user")
console.log("hello webpack")
getUserName("hello","webpack")

在user.js中我們編寫了一個(gè)方法并export，然后在index.js中引入并調(diào)用，此時(shí)查看打包之后的dist/index.js文件可以發(fā)現(xiàn)所有的代碼都打包進(jìn)去了。

...
/***/ (function(module, exports, __webpack_require__) {
let getUserName = __webpack_require__(1)
console.log("hello webpack")
getUserName("hello","webpack")
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = (function (first_name, second_name) {
    console.log("hello " + first_name + "-" + second_name)
});
/***/ })
/******/ ]);
...

命令格式說(shuō)明

webpack  [] 

- entry: 入口文件，可以一個(gè)也可以多個(gè)
- output: 輸出文件，可以是

注意：

entry可以有多個(gè)，但是一個(gè)和多個(gè)的寫法不一樣,必須以entryname=filename的形式指定。同時(shí)不能直接單純的指定輸出的文件名稱，比如./dist/index.js，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。

webpack index1=./src/index.js index2=./src/index2.js ./dist/[name].js
```
- `entry`文件名為`index.js`的時(shí)候可以省略，將會(huì)自動(dòng)在指定文件夾下尋找該文件。

現(xiàn)在開始使用配置文件的形式來(lái)配置webpack吧！

最簡(jiǎn)單的配置文件

# 0x001-begin/webpack.config.js
var path       = require("path")
module.exports = {
    entry : "./src/index.js",
    output: {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    }
}

執(zhí)行命令

$ webpack
# 輸出
Hash: 731e5b2dd5c8e29150e0
Version: webpack 3.6.0
Time: 59ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [1] ./src/user.js 112 bytes {0} [built]

這里實(shí)現(xiàn)了我們之前使用的命令webpack ./src/index.js ./dist/index.js的功能，webpack命令自動(dòng)讀取文件夾下名為webpack.config.js的配置文件。
注意：

配置文件的名稱不一定是webpack.config.js，如果不是該名稱，需要顯式的指定配置文件名稱：webpack --config

output的path必須為絕對(duì)目錄，所以這里使用了nodejs的path模塊。

3.監(jiān)聽文件變化
使用 webpack -w 可以監(jiān)聽入口文件變化，當(dāng)然包括入口文件引入的所有文件的變化，可以利用該特性做到開發(fā)網(wǎng)頁(yè)的時(shí)候的瀏覽器自動(dòng)刷新

$ webpack -w
# 輸出
Webpack is watching the files…

Hash: 731e5b2dd5c8e29150e0
Version: webpack 3.6.0
Time: 64ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [2] ./src/user.js 112 bytes {0} [built]

注意：

此時(shí)webpack執(zhí)行完并不會(huì)退出，而是一直執(zhí)行并監(jiān)聽文件改變，當(dāng)文件發(fā)生改變，將會(huì)觸發(fā)再次打包，同時(shí)控制臺(tái)將將會(huì)輸出重新打包之后的信息，除非你在控制臺(tái)按了CTRL+C

$ webpack -w
# 輸出

Webpack is watching the files…

Hash: 7ec0e3e1cfaf0227c38b
Version: webpack 3.6.0
Time: 66ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [3] ./src/user.js 113 bytes {0} [built]
Hash: 731e5b2dd5c8e29150e0
Version: webpack 3.6.0
Time: 9ms
   Asset     Size  Chunks             Chunk Names
index.js  2.94 kB       0  [emitted]  main
   [1] ./src/user.js 112 bytes {0} [built]
    + 1 hidden module
^C

修改webpack配置文件之后需要手動(dòng)重啟webpack，新的配置才會(huì)生效。

如果打包過程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。

entry可以取一下類型的值：

string："index.js"

array：["index1.js","index2.js"]

object：{index:"index1.js",index2:"index2.js"}

function：function(){return "index1.js"}

具體配置可以查看webpack關(guān)于entry的章節(jié)

當(dāng)只有一個(gè)entry時(shí)，可以直接指定output.filename，但是有多個(gè)entry時(shí)不能直接指定，否則將會(huì)報(bào)錯(cuò)

ERROR in chunk *** [entry]
***
Conflict: Multiple assets emit to the same filename ***

需要指定其他方式

[name].js：使用entry名字

[id].js：使用chunk id

[hash].js：使用哈希

[chunkhash].js：使用生成的文件的哈希（推薦）

當(dāng)然，以上可以結(jié)合來(lái)用，推薦使用[name].[chunkhash].js，既能知道是哪個(gè)entry，也能讓文件沒有修改時(shí)候保持文件名不變，讓用戶在網(wǎng)站更新后訪問時(shí)不需要重新獲取該文件，直接從緩存讀取文件
還有許多其他的配置，暫時(shí)使用不到，具體配置可以查看webpack關(guān)于output的章節(jié)

webpack：根據(jù)webpack.config.js打包，如果沒有該文件將會(huì)報(bào)錯(cuò)

webpack --config ：根據(jù)指定的配置文件打包，如果沒有該文件將報(bào)錯(cuò)

webpack -w：根據(jù)指定默認(rèn)配置文件打包，并監(jiān)聽文件變化，在文件變化后自動(dòng)打包

webpack -p：打包的時(shí)候?qū)?b>js混淆壓縮

其他更多指令說(shuō)明，查看webpack關(guān)于CLI的章節(jié)

源代碼

從零開始的webpack生活-0x001：webpack初次相逢

從零開始的webpack生活-0x002：devServer自動(dòng)刷新

從零開始的webpack生活-0x003：html模板生成

從零開始的webpack生活-0x004：js壓縮混淆

從零開始的webpack生活-0x005：DefinePlugin奇妙用處

從零開始的webpack生活-0x006：providerPlugin全局定義

從零開始的webpack生活-0x007：CommonsChunkPlugin基本用法

從零開始的webpack生活-0x008：DLL加速編譯

從零開始的webpack生活-0x009：FilesLoader裝載文件

從零開始的webpack生活-0x010：TemplatingLoader裝載模板

從零開始的webpack生活-0x011：StylingLoader裝載樣式

從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

從零開始的webpack生活-0x013：LintingLoader格式校驗(yàn)

從零開始的webpack生活-0x014：CustomLoader自定義loader

從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

從零開始的webpack生活-0x016：OtherPlugin其他常用

從零開始的webpack生活-0x017：CustomPlugin自定義插件