从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。

其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了

$ 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自定义插件