关于 Webpack

一、Webpack 的概念

本质上，Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时，它会在内部构建一个依赖图（dependency graph），此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle

二、Webpack 的构建流程

首先初始化参数并进行编译，然后从入口文件开始，调用 loader 对模块进行翻译，组装成一个个包含模块的 chunk，再把 chunk 转换成文件并输出到文件系统中

三、Webpack 的打包原理

将所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载

四、入口（entry）

入口起点（entry point）告诉 webpack 哪个是原始文件。找到这个原始文件之后开始寻找依赖包和各种资源，根据这些包还有资源选择合适的 loader 进行处理。这个入口是需要在 webpack 的配置文件（webpack.config.js）中来声明的：

module.exports = {
  entry: './path/to/my/entry/file.js'
};

五、出口（output）

出口（output）即告诉 webpack 经过各种 loader 处理后的文件应该生成到哪个目录下，也就是生成文件所在的地方。同样，需要显示的告诉 webpack 的配置文件（webpack.config.js）：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
}

六、loader（加载器）

构建的过程除了处理原生的 JavaScript，还需要处理其他非 JavaScript 文件（图片、CSS、ES6 等）。webpack loader 的作用就是提供一个机制能保证所有的类型资源都可以采用对应的 loader 进行处理，这样 webpack 就能完成更加复杂的构建过程。而这个 loader 也是需要在配置文件（webpack.config.js）中定义：

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

七、plugins（插件）

loader 被用于转换某些资源类型的模块，而插件可以用于执行范围更广的任务。插件的范围包括打包、优化和压缩、重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种任务。

要使用一个插件，需要先 require 它，然后把它添加到 plugins 数组中。多数插件可以通过选项（option）自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlwebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlwebpackPlugin({ template: './src/index.html' })
  ]
};

module.exports = config;

八、模式

Webpack 存在两种状态：开发模式（development）、生产模式（production）

构建的过程中在开发环境需要快速的构建，在生产环境需要构建一个最符合线上环境的版本。只要在配置文件中（webpack.config.js）简单配置一下就可以完成：

module.exports = {
  mode: 'production'
}