当前位置：首页 > news >正文

【Webpack配置全解析】打造你的专属构建流程️(4)

news 2025/7/3 15:46:04

webpack 提供的 CLI 支持很多参数，例如 --mode，但更多的时候，我们会使用更加灵活的配置文件来控制 webpack 的行为。默认情况下，webpack 会读取 webpack.config.js 文件作为配置文件，但也可以通过 CLI 参数 --config 来指定某个配置文件。

配置文件中通过 CommonJS 模块导出一个对象，对象中的各种属性对应不同的 webpack 配置。配置文件中的代码必须是有效的 Node.js 代码。当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准。

基本配置

以下是一些常见的 webpack 配置项：

mode：编译模式，字符串，取值为 development 或 production，指定编译结果代码运行的环境，会影响 webpack 对编译结果代码格式的处理。
entry：入口，字符串或数组，指定入口文件。
output：出口，对象，指定编译结果文件。

示例配置文件

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 文件，内容如上所示。

安装必要的依赖

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env html-webpack-plugin

运行构建

在 package.json 中添加一个 build 脚本：
```
{"scripts": {"build": "webpack"}
}
```
然后运行：
```
npm run build
```
启动开发服务器

如果你配置了 devServer，可以通过以下命令启动开发服务器：
```
npx webpack serve
```