webpack 是一个现代的 JavaScript 应用模块打包器(module bundler)。它有着难以置信的配置,然而,我们认为你必须在开始前先了解 4 个核心概念!
作为您的 webpack 学习旅程的一部分,我们写这篇文档目的在于向你传递这些概念的高度概述,同时仍然提供特定概念的相关用例。
入口(Entry)
webpack 将创建所有应用程序 依赖关系(dependency)图表(graph)。图表的起点被称之为 入口起点(entry point)。入口起点告诉 webpack 从哪里开始,并遵循着依赖关系图表知道打包什么。可以将您的应用入口起点认为是 根上下文(contextual root) 或 app第一个启动文件。
在 webpack 我们在webpack 配置对象中使用 entry
属性来定义 入口。
接下来我们看一个最简单的例子:
webpack.config.js
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
这里有多种方式声明应用程序所需的特定 entry
属性。
出口(Output)
一旦你已经将所有 资源(assets) 打包在一起,我们仍然需要告诉 webpack 在 哪里 打包我们的应用。wepback 的 output
属性描述了如何处理打包代码。
webpack.config.js
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: './dist'
}
};
在上面例子中,我们正在通过 output.filename
和 output.path
属性来描述 webpack 包的名称,以及我们想要 生成(emit) 在哪里。
tip你可能看到项目 生成(emitted 或 emit) 贯穿我们整个文档和插件 API。它是“生产(produced) 或 排放(discharged)”的特殊术语。
output
属性具有更多可配置的特性,但让我们花一些时间了解 output
属性的一些最常见的用例。
加载器(Loader)
webpack 的目标是,让项目中的所有资源都成为 webpack 的关注点,而浏览器不需要考虑这些(这并不意味着资源都必须打包在一起)。 webpack 把 每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块 处理。然而 webpack 只了解 JavaScript。
因为文件已被添加到了依赖图表,所以 webpack 加载器会将这些文件转换为模块。
webpack 配置在更高层面有两个目标。
- 识别出(identify)应该被特定的加载器转换(transform)的文件
- 转换能够被添加到依赖图表的文件(并且最终打包)(
loader
属性)
webpack.config.js
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: './dist'
},
module: {
loaders: [
{test: /\.(js|jsx)$/, loader: 'babel-loader'}
]
}
};
以上配置中,我们定义了 loader 的两个必选属性:test
和 loader
。它告诉 webpack 编译器(compiler) 如下:
“嘿,webpack 编译器,当你碰到「在
require()
/import
语句中被解析为 '.js' 或 '.jsx' 的路径」时,在你把它们添加并打包之前,要先使用babel-loader
去转换”。
warning重要的是要记得,在 webpack 配置中定义 loader 时,要定义在module.loaders
中,而不是loaders
。
我们还有尚未提到的 loader,可以设定更多特定属性。
插件(Plugins)
由于加载器仅基于单个文件执行转换,插件
最常用于(但不限于)在打包模块的“编译(compilation)”和“组块(chunk)”时执行操作和自定义功能(查看更多)。webpack 的插件系统极其强大和可定制。
为了使用插件,你只需要 require()
它们,并且把它们添加到 plugins
数组。多数插件可以通过选项(option)自定义。由于你可以在一个配置多次使用插件用于不同的目的,因此你需要使用 new
来创建插件的实例,并且调用插件。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: './dist'
},
module: {
loaders: [
{test: /\.(js|jsx)$/, loader: 'babel-loader'}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
webpack 提供许多开箱可用的插件!查阅我们的插件列表展示更多信息。
在 webpack 配置中使用插件是直接的,然而有很多用例值得我们深入讨论。