webpack配置方式

news2025/2/8 21:49:21

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,  // 启用热模块替换
  },
};