关于 Webpack - 南风 South Breeze

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。

常见的构建工具

常见的构建工具有：Npm Script、Grunt、Gulp、Webpack、Rollup

Webpack的优点是：

专注于处理模块化的项目，能做到开箱即用一步到位；
通过 Plugin 扩展，完整好用又不失灵活；
使用场景不仅限于 Web 开发；
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
良好的开发体验。

Webpack的缺点是只能用于采用模块化开发的项目。

Entry (入口)

Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入

默认是./src/index.js，可以通过在webpack configuration（webpack.config.js）中配置entry属性，来指定一个（或多个）不同的入口起点。

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

Output (输出)

在 Webpack 经过一系列处理并得出最终想要的代码后输出结果

配置中指定一个 output 字段，来配置这些处理过程：

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 (模块转换器)

loader用于把模块原内容按照需求转换成新内容。（loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。）

在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。一组 Loader 的执行顺序默认是从右到左执行，通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。

const path = require('path');

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

常见loader：http://webpack.wuhaolin.cn/附录/常用Loaders.html

Plugin (扩展插件)

plugin可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

使用一个插件，需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。

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

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
// html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle

常见plugin：http://webpack.wuhaolin.cn/附录/常用Plugins.html

Mode (模式)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: 'production',
};

或者从 CLI 参数中传递

webpack --mode=development

Chunk (代码块)

一个 Chunk 由多个模块组合而成，用于代码合并与分割。

Module (模块)

在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

整体配置结构

这里给出一份代码来描述清楚：点击查看

总计

通常如下经验去判断如何配置 Webpack：

想让源文件加入到构建流程中去被 Webpack 控制，配置 entry。
想自定义输出文件的位置和名称，配置 output。
想自定义寻找依赖模块时的策略，配置 resolve。
想自定义解析和转换文件的策略，配置 module，通常是配置 module.rules 里的 Loader。
其它的大部分需求可能要通过 Plugin 去实现，配置 plugin。