webpack 的构建流程

构建流程/打包原理：首先初始化参数并进行编译，然后从入口文件开始，调用 loader 对模块进行翻译，组装成一个个包含多个模块的 Chunk，再把 Chunk 转换成文件并输出到文件系统中。

webpack 构建流程分析 ▼

1、初始化参数

从 webpack.config.js 配置文件和 Shell 语句中读取与合并参数，得出最终的参数。

2、开始编译

将上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，插件监听 Webpack 构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。

3、确定入口

根据 webpack.config.js 配置文件中指定的 entry 入口找出所有的入口文件。

4、编译模块

从入口文件开始，调用所有配置的 Loader 对模块（文件）进行翻译，再找出该模块依赖的模块，递归这个步骤，直到所有入口依赖的文件都完成处理。

5、完成模块编译

在上一步用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系，根据 entry 配置生成 Chunk 代码块。

6、输出完成

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

var path = require('path')
var node_modules = path.resolve(__dirname, 'node_modules')
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js')

module.exports = {
  // 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/app.js')
    ]
  },
  // 文件路径指向(可加快打包过程)
  resolve: {
    alias: {
      react: pathToReact
    }
  },
  // 生成文件，是模块构建的终点，包括输出文件与输出路径
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  // 这里配置了处理各模块的 loader，包括 css 预处理 loader，es6 编译 loader，图片处理 loader
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件对象，在 webpack 的事件流中执行对应的方法
  plugins: [new webpack.HotModuleReplacementPlugin()]
}