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

webpack配置方式

news 2025/6/24 10:34:09

1. 基本配置文件 (`webpack.config.js`)（导出一个对象）

最常见的方式是通过 webpack.config.js 文件来配置 Webpack，导出一个对象。你可以在这个文件中导出一个配置对象，指定入口、输出、加载器、插件等。

// webpack.config.js
module.exports = {entry: './src/index.js',  // 入口文件output: {filename: 'bundle.js',  // 输出文件名path: __dirname + '/dist'  // 输出目录},module: {rules: [{test: /\.js$/,  // 匹配所有 .js 文件exclude: /node_modules/,use: 'babel-loader',  // 使用 Babel 转译},],},
};

3. 通过 JavaScript 动态配置（导出一个函数）

Webpack 配置文件本身是一个 Node.js 模块，因此你可以使用 Node.js 的功能来动态生成配置。例如，可以根据环境变量或命令行参数来调整 Webpack 配置。

// webpack.config.js
const path = require('path');module.exports = (env, argv) => {return {entry: './src/index.js',output: {filename: argv.mode === 'production' ? 'bundle.min.js' : 'bundle.js',path: path.resolve(__dirname, 'dist'),},};
};

在这个例子中，根据 argv.mode （development 或 production）来决定输出的文件名。

4. 多配置文件（Multi-Configuration）（导出一个数组）

Webpack 允许你使用多个配置文件进行构建，通常用于不同的构建目标（如开发模式和生产模式）或支持多个入口文件。你可以将多个配置文件合并到一起，Webpack 会依次处理这些配置。

// webpack.config.dev.js
module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},
};// webpack.config.prod.js
module.exports = {mode: 'production',entry: './src/index.js',output: {filename: 'bundle.min.js',path: __dirname + '/dist',},
};// webpack.config.js
const devConfig = require('./webpack.config.dev');
const prodConfig = require('./webpack.config.prod');module.exports = [devConfig, prodConfig];  // Webpack 会处理两个配置

5. 通过 `webpack-merge` 合并配置

如果你的项目有多个配置文件，可以使用 webpack-merge 来合并公共配置和特定环境（开发/生产）下的配置。这种方法通常用于减少配置重复。

npm install webpack-merge --save-dev

// webpack.common.js
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},
};// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');module.exports = merge(common, {mode: 'development',devtool: 'inline-source-map',
});// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');module.exports = merge(common, {mode: 'production',optimization: {minimize: true,},
});

6. 运行webpack配置文件

6.1、通过 `webpack-cli` 配置

当你使用 webpack-cli 时，可以通过命令行进行一些配置。比如，使用 --config 选项指定一个不同的配置文件。

webpack --config webpack.config.prod.js

6.2、通过 `package.json` 配置

对于简单的项目，Webpack 配置项有时也可以直接在 package.json 文件的 scripts 字段中进行设置。这对于不需要复杂配置的简单项目特别方便。

{"scripts": {"build": "webpack --mode production","dev": "webpack serve --mode development"}
}

6.3、通过 `webpack-dev-server` 配置

webpack-dev-server 提供了一个开发服务器，并允许在配置文件中进行设置。你可以通过 devServer 配置项来配置 Webpack Dev Server 的行为，如热加载、代理等。

// webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},devServer: {contentBase: './dist',  // 设置静态文件目录hot: true,  // 启用热模块替换},
};