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

時間 2019-11-16

原文原文鏈接

0x001 概述

其實我不知道怎麼寫，因此決定就一塊一塊的寫點日常配置的過程，根據不一樣東西稍微分區一下就行了html

0x002 初始化項目結構

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

0x003 安裝`webpack`，並檢查環境

$ 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

0x004 第一個栗子-最簡單的使用方式

這個栗子使用的是命令行打包形式，純粹用來作測試而已，在正式項目中，咱們的配置將會達到很是複雜的程度雖然命令行依舊能夠實現，可是將會帶來維護上的和形式上的麻煩，因此咱們一般會採用配置文件的形式。

編寫一個js文件node

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

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

$ 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自動生成的，暫時無論，之後再去分析他，在文件末尾找一找即可以發現咱們寫的那句話也在裏面。git
```
...
/***/ (function(module, exports) {
console.log('hello webpack')
/***/ })
...
```

文件引用
日常咱們在作項目的時候，會將不一樣的功能、不一樣的類寫在不一樣的文件，使用的時候互相引用，提高項目的可維護性和可擴展性。github

# 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文件能夠發現全部的代碼都打包進去了。web

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

命令格式說明npm
```
webpack <entry> [<entry>] <output>
- entry: 入口文件，能夠一個也能夠多個
- output: 輸出文件，能夠是
```
注意：segmentfault
- entry能夠有多個，可是一個和多個的寫法不同,必須以entryname=filename的形式指定。同時不能直接單純的指定輸出的文件名稱，好比./dist/index.js，將會報錯，能夠換成如下方式指定，或者其餘相似方式。

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

0x005-使用配置文件

如今開始使用配置文件的形式來配置 webpack吧！

最簡單的配置文件api

# 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 <path/to/config/file>
- 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，新的配置纔會生效。
若是打包過程出現錯誤，好比語法錯誤，將會在控制檯以紅色文字顯示，而且在你修復以後會再次打包。

0x006 詳解`entry`

entry能夠取一下類型的值：

string：'index.js'
array：['index1.js','index2.js']
object：{index:'index1.js',index2:'index2.js'}
function：function(){return 'index1.js'}

具體配置能夠查看webpack關於entry的章節

0x007 詳解`output`

當只有一個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的章節