摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。

其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了

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

$ node -v
# 輸出
v8.4.0
$ npm -v
# 輸出
v5.4.2
$ cnpm -v
# 輸出
cnpm@5.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@5.4.1 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@8.4.0 (/usr/local/bin/node)
npminstall@3.1.4 (/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
...
[webpack@3.8.1] link /usr/local/bin/webpack@ -> /usr/local/lib/node_modules/webpack/bin/webpack.js

$ webpack -v
# 輸出
3.8.1

這個栗子使用的是命令行打包形式，純粹用來做測試而已，在正式項目中，我們的配置將會達到非常復雜的程度雖然命令行依舊可以實現，但是將會帶來維護上的和形式上的麻煩，所以我們通常會采用配置文件的形式。

編寫一個js文件

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

在0x001-begin文件夾下執行命令

$ cd 0x001-begin
$ webpack ./src/index.js ./dist/index.js
# 控制臺輸出
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]

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

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

文件引用
平常我們在做項目的時候，會將不同的功能、不同的類寫在不同的文件，使用的時候互相引用，提升項目的可維護性和可擴展性。

# 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中我們編寫了一個方法并export，然后在index.js中引入并調用，此時查看打包之后的dist/index.js文件可以發現所有的代碼都打包進去了。

...
/***/ (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)
});
/***/ })
/******/ ]);
...

命令格式說明

webpack  [] 

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

注意：

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

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

現在開始使用配置文件的形式來配置webpack吧！

最簡單的配置文件

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

執行命令

$ 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]

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

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

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

3.監聽文件變化
使用 webpack -w 可以監聽入口文件變化，當然包括入口文件引入的所有文件的變化，可以利用該特性做到開發網頁的時候的瀏覽器自動刷新

$ 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]

注意：

此時webpack執行完并不會退出，而是一直執行并監聽文件改變，當文件發生改變，將會觸發再次打包，同時控制臺將將會輸出重新打包之后的信息，除非你在控制臺按了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配置文件之后需要手動重啟webpack，新的配置才會生效。

如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。

entry可以取一下類型的值：

string："index.js"

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

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

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

具體配置可以查看webpack關于entry的章節

當只有一個entry時，可以直接指定output.filename，但是有多個entry時不能直接指定，否則將會報錯

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

需要指定其他方式

[name].js：使用entry名字

[id].js：使用chunk id

[hash].js：使用哈希

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

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

webpack：根據webpack.config.js打包，如果沒有該文件將會報錯

webpack --config ：根據指定的配置文件打包，如果沒有該文件將報錯

webpack -w：根據指定默認配置文件打包，并監聽文件變化，在文件變化后自動打包

webpack -p：打包的時候對js混淆壓縮

其他更多指令說明，查看webpack關于CLI的章節

源代碼

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

從零開始的webpack生活-0x002：devServer自動刷新

從零開始的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格式校驗

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

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

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

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