【webpack】webpack 配置文件

相关文章

webpack 配置文件

一、配置文件类型

1、CommonJS 格式的配置文件

这是最常见的配置文件格式，通常命名为 webpack.config.js。在这种配置文件中，使用 CommonJS 模块的导出语法导出一个配置对象，Webpack 会根据这个配置对象进行构建。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

2、多个配置文件

可以将Webpack的配置拆分为多个文件，然后使用 webpack-merge 等工具将它们合并成一个配置对象。这种方式通常用于区分开发环境和生产环境等不同情况。

// 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 commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
  mode: 'development'
  // other development-specific configurations...
});

// webpack.prod.js
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
  mode: 'production'
  // other production-specific configurations...
});

3、JSON 格式的配置文件

Webpack也支持使用JSON格式的配置文件，文件名通常是 webpack.config.json。在这种格式下，配置直接是一个JSON对象。

// webpack.config.json
{
  "entry": "./src/index.js",
  "output": {
    "filename": "bundle.js",
    "path": "./dist"
  }
}

4、YAML 格式的配置文件

Webpack也支持使用YAML格式的配置文件，文件名通常是 webpack.config.yaml 或 webpack.config.yml。

# webpack.config.yml
entry: ./src/index.js
output:
  filename: bundle.js
  path: ./dist

二、如何加载配置文件

1、命令行参数

可以通过在命令行中指定配置文件来加载配置。Webpack提供了 -c 或 –config 参数，用于指定配置文件的路径。

1	`webpack --config webpack.config.js`

使用这种方式加载配置文件时，Webpack会根据指定的配置文件路径来读取配置。

2、Webpack API

在Node.js环境中，可以使用Webpack的Node.js API来加载配置文件。通过调用 webpack() 函数并传递配置对象作为参数，Webpack会使用传入的配置对象来进行构建。

const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

webpack(webpackConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 构建过程中出现错误
  } else {
    // 构建成功
  }
});