前言
Webpack 是一个开源的前端模块化打包工具，它将多个模块打包成一个或多个 bundle 文件。Webpack 3.x 是目前最新的稳定版本，本文将介绍 Webpack 3.x 的入门指南和源码分析。
入门指南
安装
Webpack 3.x 需要 Node.js 环境，因此需要先安装 Node.js。可以通过官网下载安装包，也可以使用 nvm 进行管理。
安装完成 Node.js 后，可以使用 npm 安装 Webpack。
npm install webpack -g
基本使用
Webpack 的基本使用非常简单，只需要创建一个配置文件，然后执行 webpack 命令即可。
配置文件
Webpack 的配置文件是一个 JavaScript 文件，可以导出一个配置对象或一个函数。
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
};上面的配置文件定义了入口文件和输出文件的路径。入口文件是 ./src/index.js，输出文件是 ./dist/bundle.js。
执行命令
执行 webpack 命令时，可以指定配置文件的路径。
webpack --config webpack.config.js
也可以将配置文件命名为 webpack.config.js，这样执行 webpack 命令时就会自动读取该文件。
webpack
加载器
Webpack 可以使用加载器来处理各种类型的文件，例如 CSS、图片、字体等。加载器可以将文件转换成模块，以便在 JavaScript 中引用。
CSS 加载器
使用 CSS 加载器需要安装 css-loader 和 style-loader。
npm install css-loader style-loader --save-dev
配置文件中需要加入以下代码。
// www.javascriptcn.com code example
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}图片加载器
使用图片加载器需要安装 file-loader。
npm install file-loader --save-dev
配置文件中需要加入以下代码。
// www.javascriptcn.com code example
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}
]
}
]
}上面的配置会将图片文件输出到 ./dist/images/ 目录下。
插件
Webpack 还可以使用插件来扩展其功能。插件是一个 JavaScript 类，可以在构建过程中执行一些自定义的任务。
HTML 插件
使用 HTML 插件可以自动生成 HTML 文件，并将打包后的脚本自动插入到 HTML 文件中。
使用 HTML 插件需要安装 html-webpack-plugin。
npm install html-webpack-plugin --save-dev
配置文件中需要加入以下代码。
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Demo',
template: 'index.html'
})
]上面的配置会将 ./index.html 文件作为模板，自动生成 HTML 文件，并将打包后的脚本自动插入到 HTML 文件中。
源码分析
Webpack 的源码非常复杂，包含了很多功能。本文只介绍其中的一部分。
基本架构
Webpack 的基本架构包含了 Compiler、Compilation、Module 和 Chunk 四个概念。
Compiler 是整个打包的主入口，负责解析配置文件、创建 Compilation 对象等。
Compilation 是一次打包过程的上下文对象，包含了打包过程中的各种信息，例如入口模块、输出文件等。
Module 是一个 JavaScript 模块，可以依赖其它模块。每个 Module 都会被解析成一个 Chunk。
Chunk 是一个代码块，包含了多个 Module。每个 Chunk 都会被编译成一个输出文件。
Compiler
Compiler 是 Webpack 的主入口，它的作用是解析配置文件、创建 Compilation 对象等。
Compiler 的源码位于 lib/Compiler.js 文件中。以下是 Compiler 的主要功能。
解析配置文件
Compiler 会读取配置文件，并将其解析成一个 JavaScript 对象。
const webpack = require('webpack');
const config = require('./webpack.config.js');
const compiler = webpack(config);Webpack 的配置文件是一个 JavaScript 模块，可以导出一个配置对象或一个函数。Compiler 会调用这个函数，并将返回值作为配置对象。
创建 Compilation 对象
Compiler 会创建一个 Compilation 对象，并将其作为参数传递给各个插件。
compiler.plugin('compilation', (compilation) => {
// ...
});Compilation 包含了打包过程中的各种信息，例如入口模块、输出文件等。
创建 Chunk 对象
Compiler 会根据配置文件中的入口文件创建一个 Chunk 对象，并将其作为参数传递给各个插件。
compiler.plugin('make', (compilation, callback) => {
const chunk = compilation.addEntry(entry, name, callback);
});Chunk 包含了多个 Module。每个 Module 都可以依赖其它模块，这些模块也会被解析成一个 Chunk。
Compilation
Compilation 是一次打包过程的上下文对象，包含了打包过程中的各种信息，例如入口模块、输出文件等。
Compilation 的源码位于 lib/Compilation.js 文件中。以下是 Compilation 的主要功能。
解析模块
Compilation 会根据模块路径解析模块，并将其转换成 AST。
const source = compilation.inputFileSystem.readFileSync(path, 'utf-8'); const ast = compilation.createModuleAST(source, path);
Webpack 支持多种模块格式，例如 CommonJS、ES6 等。Compilation 会根据不同的模块格式进行解析，并将其转换成统一的 AST。
构建 Chunk
Compilation 会根据 Chunk 中的 Module，构建出一个 JavaScript 文件。
chunk.renderContent(compilation, source, (err, result) => {
if (err) return callback(err);
compilation.assets[chunk.files[0]] = result;
callback();
});Webpack 还支持多个 Chunk，每个 Chunk 都会被编译成一个输出文件。
Module
Module 是一个 JavaScript 模块，可以依赖其它模块。每个 Module 都会被解析成一个 Chunk。
Module 的源码位于 lib/Module.js 文件中。以下是 Module 的主要功能。
解析依赖
Module 可以依赖其它模块，例如 CommonJS 模块可以使用 require 关键字引用其它模块。
// ./src/index.js
const foo = require('./foo.js');
console.log(foo);Module 会解析这些依赖，并将其转换成一个依赖关系图。
转换代码
Module 会将代码转换成可执行的 JavaScript 代码。例如 ES6 模块会被编译成 CommonJS 模块。
// www.javascriptcn.com code example
// ./src/index.js
import foo from './foo.js';
console.log(foo);
// ./src/foo.js
export default 'foo';
// ./dist/bundle.js
var foo = require('./foo.js');
console.log(foo.default);Webpack 支持多种模块格式，Module 会根据不同的模块格式进行转换。
Chunk
Chunk 是一个代码块，包含了多个 Module。每个 Chunk 都会被编译成一个输出文件。
Chunk 的源码位于 lib/Chunk.js 文件中。以下是 Chunk 的主要功能。
构建输出文件
Chunk 会根据 Module 构建出一个 JavaScript 文件，并将其输出到指定的目录。
chunk.render(outputOptions, compilation, callback);
Webpack 还支持多个 Chunk，每个 Chunk 都会被编译成一个输出文件。
结语
Webpack 是一个非常强大的前端打包工具，它可以处理各种类型的文件，并将多个模块打包成一个或多个 bundle 文件。本文介绍了 Webpack 3.x 的入门指南和源码分析，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8bb46a941bf7134f40c2e