Расширение

расширение

string | string[]

webpack v5.82.0+ webpack-cli v5.1.0+

Свойство extends позволяет расширить существующую конфигурацию, чтобы использовать её в качестве базовой. Внутренне оно использует пакет webpack-merge для слияния конфигураций, помогая избежать дублирования настроек в нескольких конфигурациях.

base.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
};

webpack.config.js

module.exports = {
  extends: path.resolve(__dirname, './base.webpack.config.js'),
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Расширение нескольких конфигураций

Вы можете расширить несколько конфигураций одновременно, передав массив путей к конфигурациям в свойство extends.

Конфигурации из свойства extends сливаются справа налево, что означает, что конфигурация справа будет слита в конфигурацию слева. Конфигурацию можно переопределить, передав то же свойство в конфигурации справа.

js.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

css.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

webpack.config.js

module.exports = {
  extends: [
    path.resolve(__dirname, './js.webpack.config.js'),
    path.resolve(__dirname, './css.webpack.config.js'),
  ],
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Переопределение конфигураций

Вы можете переопределить конфигурации из расширяемой конфигурации, передав то же свойство в конфигурацию, которая её расширяет.

base.webpack.config.js

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

webpack.config.js

module.exports = {
  extends: path.resolve(__dirname, './base.webpack.config.js'),
  entry: './src/index.js',
  // overriding the output path and filename
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
  },
};

Загрузка конфигурации из внешних пакетов

Вы также можете загрузить конфигурацию из сторонних пакетов, передав имя пакета в свойство extends. Пакет должен экспортировать конфигурацию webpack в package.json.

webpack.config.js

module.exports = {
  extends: require.resolve('webpack-config-foo'),
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};