今天学习了一下 Webpack ，只是入门，对其有了一个初步的概念，大致只是到官方文档的概念这里。这里将我所学习到的这一些皮毛做一个整理，以加深自己的理解，并帮助其他和我一样正在学习的同学。
前置知识 至少对前端开发有些了解
阅读时间 10 ～ 20 min
demo 仓库地址：https://github.com/doooooit/hello-webpack
一、什么是 Webpack，用它来干嘛
每一个 Web App，即便是最简单的一个页面，也会使用一些其他资源，比如*.js，*.css等等。不使用 Webpack 前，我们只能自己手动在 HTML 页面里管理这些依赖，写一堆<link ... />, <script src="..."></script>，一个两个还好，但现代的 Web 每一个都有一大堆依赖，而且不光是数量的问题，资源有可能是多种类型的，有可能是.js或者.ts，可能是.css或者.less，这些文件还需要编译。如果这些资源用手动管理将是一场灾难，不仅重复简单低效的劳动，还容易出错，既然是程序员，那就应该尽可能将任务交给计算机自动处理。
Webpack 正是为此而生，作为一个现代 JavaScript 应用程序的模块打包器(module bundler)而存在。它将每一个资源文件都视为一个模块(module)，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的捆包(bundle)。bundle 通常只有一个，由浏览器加载。
这张从 Webpack 官网首页截取的图片基本可以直观地看出它是干啥的了。
在模块打包这一基本功能的基础上，Webpack 还有很多令人欣喜的特性，但这不在本文的讨论范围，请参考官方文档。
二、它是怎么工作的
Webpack 依照配置文件进行工作，文件名为webpack.config.js。在配置文件中，有四个 Webpack 的核心概念，如果不了解这些概念，就不能了解 Webpack。
1. 入口(Entry)
为了能够打包所有模块，Webpack 会构建一个依赖关系图，而这个图需要一个入口，来告诉 Webpack 从哪里开始构建。可以将它理解为运行 app 时第一个执行的文件。
module.exports = {
entry: './path/to/my/entry/file.js'
};
入口可以有多个
2. 出口(Output)
既然是打包，那把所有东西捆起来之后就会生成(emit)一个捆包(bundle)，这个就是出口。在配置文件中，出口需要两个属性，一个是路径，一个是文件名。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'), // 路径
filename: 'my-webpack-output.bundle.js' // 文件名
}
};
3. Loader
Webpack 的目标是将所有模块都打包起来，而使浏览器不必关注这些事情。这些模块包括但不限于.js, .css, .sass, .png, etc，但是 Webpack 只能理解 JavaScript 不能理解其他文件模块类型可咋办。上帝说要有光，于是便有了 Loader。它的作用就是把所有非 JavaScript 的模块转换成 Webpack 能够理解的模块。
不同类型的模块有不同的 Loader，比如.css可能会用到 css-loader，而.txt可能会用到raw-loader。
在配置文件中，对 Loader 需要配置两个必须的属性：
1. 识别出是哪种文件（ test 属性）
2. 对识别出的文件使用对应的 Loader 以转换它（ use 属性）
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-webpack-output.bundle.js'
},
module: { // Loader 模块转换
rules: [ // test 和 use 要写在 rules 中，而 rules 要写在 module 中
{
test: /\.txt$/, // test 属性，可以使用正则表达式
use: 'raw-loader' // .txt 文件对应的 Loader
}
]
}
};
module.exports = config;
Loader 通常是第三方的，要使用哪个必须先安装，比如上文中的 raw-loader：
npm install --save-dev raw-loader
Loader 的特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步或异步函数。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于 loader 间传递配置。
- loader 也能够使用 options 对象进行配置。
- 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
4. 插件(plugins)
Loader 通常只做转换，但有时候我们会需要进行一些更多的操作，最简单的比如添加一些注释信息，这时我们就可以使用插件，它可以完成 Loader 不能完成的任务。
Webpack 本身内置了一些插件，同时还可以安装第三方插件或自己写。使用 npm 进行安装。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(), // 使用 Webpack 内置插件
new HtmlWebpackPlugin({template: './src/index.html'}) // 使用第三方插件
]
};
// 以上插件功能请查阅相应文档
module.exports = config;
三、使用
1. 安装
Webpack 可以全局安装，也可以在项目内安装，推荐后者。
npm install --save-dev webpack // 安装最新版
npm install --save-dev webpack@<version> // 安装特定版本
2. 编写配置文件
配置文件名为 webpack.config.js，位于项目的根目录下。对于本 demo ，配置文件内容如下
const webpack = require('webpack'); // webpack 内置插件
const path = require('path'); // 路径处理
module.exports = {
entry: './entry.js', // 入口
output: {
path: path.resolve(__dirname, 'dist'), // 生成到当前目录的 dist 目录下
filename: 'bundle.js' // 生成文件名
},
module: { // Loader 写在 module.rules 中
rules: [
{
test: /\.css$/,
use: [
// 对一个模块可以使用多个 Loader ，顺序传递
{ loader: 'style-loader' },
{ loader: 'css-loader',
option: {
modules: true
}
}
]
}
]
}
}
3. 打包
执行打包有多种方法，推荐使用在 package.json 中添加 script 字段实现，前提是你已经使用 npm 安装了 Webpack 。如下
...
"script": {
"build": "webpack"
},
...
然后在终端执行命令
npm run build
然后 Webpack 会输出打包过程的一些信息，执行完后会在我们指定的 __dirname + dist 目录下生成 bundle.js 文件。
原来我们的 HTML 文件结构是这样的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Hello Webpack</title>
<link href="./src/css/main.css" rel="stylesheet">
</head>
<body>
<h1>Hello Webpack</h1>
<script src="./src/js/main.js"></script>
</body>
</html>
现在我们只需要这样：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Hello Webpack</title>
</head>
<body>
<h1>Hello Webpack</h1>
<script src="dist/bundle.js"></script>
</body>
</html>
后记
本人也是初学，所以可能有错误疏漏，欢迎大家指正。
引用
本文中部分文字描述和代码引用了 Webpack 中文官网 的相关内容。
版权声明 自由转载 - 保持署名 - 不可商用 - 不可演绎 （CC3.0 创意共享3.0许可证）
