- 入口(entry)配置
- 概念:入口起点是 Webpack 构建依赖图的开始。它告诉 Webpack 应该从哪个模块开始构建,并将其作为入口点,然后递归地解析和加载所有相关的模块。
- 实际配置示例 - 单入口应用:
- 如果是一个简单的 JavaScript 应用,假设项目结构如下:
src
index.js
(主入口文件)other.js
(被index.js
引用的文件)
- 在
webpack.config.js
(假设这是 Webpack 配置文件)中的entry
配置可以是:
module.exports = {
entry: './src/index.js'
};
- 实际配置示例 - 多入口应用(例如多页面应用):
- 假设项目结构如下:
webpack.config.js
中的entry
配置可以是:
module.exports = {
entry: {
page1: './src/page1/index.js',
page2: './src/page2/index.js'
}
};
- 这样配置后,Webpack 会为
page1
和page2
分别构建独立的依赖图,最终可以生成多个打包后的文件,用于多页面应用的不同页面。
- 输出(output)配置
- 概念:输出配置告诉 Webpack 如何处理和输出构建后的文件。包括文件名、路径等重要信息。
- 实际配置示例 - 基本配置:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
- 这里
filename
定义了输出文件的名称为main.js
,path
使用path.resolve
方法确定了输出目录为项目根目录下的dist
文件夹(__dirname
表示当前配置文件所在的目录)。 - 实际配置示例 - 多入口输出配置:
const path = require('path');
module.exports = {
entry: {
page1: './src/page1/index.js',
page2: './src/page2/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};
- 这里
filename
中的[name]
是一个占位符,它会被entry
对象中的键(page1
和page2
)替换,这样就会分别输出page1.js
和page2.js
到dist
目录。
- 解析器(loader)配置
- 概念:Webpack 本身只能理解 JavaScript 和 JSON 文件。Loader 让 Webpack 能够处理其他类型的文件,并将它们转换为有效的模块,这些模块可以添加到依赖图中。例如,将 CSS 文件转换为 JavaScript 模块,或者将 ES6/ES7 语法的 JavaScript 文件转换为浏览器可执行的 ES5 语法文件。
- 实际配置示例 - 处理 CSS 文件:
- 假设要在 JavaScript 中导入 CSS 文件,首先需要安装
style - loader
和css - loader
:
npm install style-loader css-loader - - save - dev
- 然后在
webpack.config.js
中配置loader
:
module.exports = {
//...其他配置
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
- 这里
rules
是一个数组,每个规则对象有test
属性(用于匹配文件类型,这里是匹配.css
文件)和use
属性(指定使用的loader
,顺序很重要,从右到左执行,先css - loader
处理 CSS 文件,然后style - loader
将 CSS 添加到 DOM 中)。 - 实际配置示例 - 处理 ES6+ JavaScript 文件:
- 安装
babel - loader
以及相关的 Babel 预设(例如@babel/preset - env
):
- 配置
loader
:
module.exports = {
//...其他配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset - env']
}
}
}
]
}
};
- 这里
test
匹配.js
文件,exclude
排除node_modules
目录(通常不希望对这些已经编译好的模块再次编译),use
中的babel - loader
用于处理文件,并且通过options
指定了 Babel 预设来转换 ES6 + 语法。
- 插件(plugin)配置
- 概念:插件用于执行范围更广的任务,比如打包优化、资源管理、注入环境变量等。与
loader
专注于转换特定类型的模块不同,插件可以在 Webpack 构建过程的各个阶段介入。 - 实际配置示例 - HtmlWebpackPlugin(自动生成 HTML 文件并注入打包后的脚本):
- 安装
html - webpack - plugin
:
npm install html - webpack - plugin - - save - dev
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
//...其他配置
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: './src/index.html',
filename: 'index.html'
})
]
};
- 这个插件会根据
template
指定的 HTML 模板文件(这里是src/index.html
)生成一个新的 HTML 文件(filename
指定为index.html
),并且会自动将打包后的脚本(如main.js
)注入到生成的 HTML 文件中,title
属性用于设置 HTML 文档的标题。 - 实际配置示例 - CleanWebpackPlugin(清理输出目录):
- 安装
clean - webpack - plugin
:
npm install clean - webpack - plugin - - save - dev
const {CleanWebpackPlugin} = require('clean - webpack - plugin');
module.exports = {
//...其他配置
plugins: [
new CleanWebpackPlugin()
]
};
- 这个插件会在每次构建前清理
output
配置中指定的输出目录(如dist
目录),确保没有旧的文件残留,使得每次构建的输出都是最新的。
- 模式(mode)配置
- 概念:模式是 Webpack 4 引入的一个重要配置选项,它可以设置为
development
或production
,用于告诉 Webpack 针对不同的环境进行优化。development
模式注重开发体验,提供详细的错误信息和调试支持;production
模式注重优化打包后的文件大小和性能。 - 实际配置示例:
module.exports = {
mode: 'production'
//...其他配置
};
module.exports = {
mode: 'development'
//...其他配置
};
- 当设置为
production
模式时,Webpack 会自动启用一些优化,如代码压缩、模块标识符简化等。在development
模式下,这些优化通常不会启用,以便于开发和调试。例如,在production
模式下,生成的 JavaScript 文件会被压缩,变量名会被缩短,而在development
模式下,代码更接近原始的编写形式,方便查看错误和调试。