webpack3终极配置及其优化（react）

本文主要研究webpack3版本的react项目配置。

webpack的原理

在普通开发者看来，webpack就是一个黑盒。

由一个或多个Entry(输入)传入，最后输出一个或多个Output(输出)。

webpack的内部具体是如何处理的呢？

webpack几大概念

• Entry： 输入。webpack从此处开始执行构建。
• Output：输出。webpack最终处理输出的文件。
• Plugin： 插件。webpack处理时抛出事件，插件接受事件处理额外的逻辑。
• Loader：模块转换器。内容转换。
• Module：模块。一个文件就是一个模块。
• Chunk：块。一个块有一个或多个模块组成。

webpack执行流程

1. 首先webpack会把Entry(输入)文件当作一个Module(模块)。
2. （使用Loaders，稍后会讲）翻译Module文件，并识别出Module文件的所有依赖文件。
3. 然后对其依赖的文件再进行步骤2。
4. 所有Module识别完之后，根据每个模块和Entry的对应关系，组装成一个或多个Chunk，并输出到输出列表。
5. 根据Output的相关配置，输出到文件里。
6. 这个过程中，webpack会在操作过程中广播特定事件，PLugin(插件)会在自己感兴趣的事件后，执行特定逻辑。

webpack如何解析文件与文件之间的联系？

对于模块与模之间的联系，开发者通常会
- 使用script标签引入
- 通过commonjs（commonjs1，commonjs2）引入
- 通过AMD（require.js）引入
- 通过es6定义的模块引入方式引入

除了第一种方式，webpack都可以识别，作为文件依赖的标志，我们可以通过config配置，去支持或禁用哪一种引入方式。

为什么要使用loader？

假设我们写了这么一行代码：

import style from './index.css'

不好意思，webpack解析不了。

webpack原生不能解析css文件，目前webpack只能原生解析js文件，需要Loader转换并插入到js文件。还有图片文件等等都需要Loader支持。（具体配置见后文）

为什么要使用plugin？

Plugin可以大大扩展webpack的功能，哈哈。（具体配置见后文）

webpack的基础搭建

基本配置

只要有输入，输出，webpack就能跑起来了。

// commonJS语法
const path = require(path);
const config = {
    entry: 'app.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '')
    }

}

module.exports = config;

如果我们定义了多个入口文件，我们就会输出与入口文件数量对应的多个包。

Scope Hoisting

生成的output文件本身是一个自执行函数&#