webpack 提供的 CLI 支持很多参数,例如 --mode
,但更多的时候,我们会使用更加灵活的配置文件来控制 webpack 的行为。默认情况下,webpack 会读取 webpack.config.js
文件作为配置文件,但也可以通过 CLI 参数 --config
来指定某个配置文件。
配置文件中通过 CommonJS 模块导出一个对象,对象中的各种属性对应不同的 webpack 配置。配置文件中的代码必须是有效的 Node.js 代码。当命令行参数与配置文件中的配置出现冲突时,以命令行参数为准。
基本配置
以下是一些常见的 webpack 配置项:
- mode :编译模式,字符串,取值为
development
或production
,指定编译结果代码运行的环境,会影响 webpack 对编译结果代码格式的处理。 - entry:入口,字符串或数组,指定入口文件。
- output:出口,对象,指定编译结果文件。
示例配置文件
javascript
const path = require('path');
module.exports = {
// 编译模式
mode: 'development', // 或 'production'
// 入口文件
entry: './src/index.js', // 单个入口
// entry: {
// main: './src/index.js', // 多个入口
// another: './src/another.js'
// },
// 出口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出路径
},
// 模块规则
module: {
rules: [
{
test: /\.js$/, // 匹配 .js 文件
exclude: /node_modules/, // 排除 node_modules 目录
use: {
loader: 'babel-loader' // 使用 Babel 转换 ES6 代码
}
},
{
test: /\.css$/, // 匹配 .css 文件
use: ['style-loader', 'css-loader'] // 使用 style-loader 和 css-loader
}
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // 使用模板生成 HTML 文件
})
],
// 开发服务器
devServer: {
contentBase: './dist', // 静态文件根目录
hot: true // 热模块替换
}
};
详细解释
-
mode:编译模式
development
:开发模式,不会对代码进行压缩,适合开发环境。production
:生产模式,会对代码进行压缩和优化,适合生产环境。
-
entry:入口文件
- 单个入口:
entry: './src/index.js'
- 多个入口:
entry: { main: './src/index.js', another: './src/another.js' }
- 单个入口:
-
output:出口文件
filename
:输出文件名。path
:输出路径,使用path.resolve
确保路径是绝对路径。
-
module:模块规则
rules
:定义一组规则,用于处理不同类型的文件。test
:匹配文件的正则表达式。exclude
:排除某些文件或目录。use
:使用的加载器(loader)。
-
plugins:插件
- 插件用于执行更复杂的任务,如生成 HTML 文件、压缩代码等。
- 例如,
HtmlWebpackPlugin
用于生成 HTML 文件。
-
devServer:开发服务器
contentBase
:静态文件根目录。hot
:启用热模块替换(HMR),在开发过程中自动刷新页面。
使用配置文件
-
创建配置文件
在项目根目录下创建
webpack.config.js
文件,内容如上所示。 -
安装必要的依赖
bashnpm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env html-webpack-plugin
-
运行构建
在
package.json
中添加一个build
脚本:json{ "scripts": { "build": "webpack" } }
然后运行:
bashnpm run build
-
启动开发服务器
如果你配置了
devServer
,可以通过以下命令启动开发服务器:bashnpx webpack serve
总结
通过本课程,你已经基本掌握了如何使用 webpack 配置文件来控制构建过程。配置文件提供了更灵活的方式来管理复杂的构建任务,使得开发更加高效和便捷。