Extends
extends
string | string[]
'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",
},
};Extending multiple configurations
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",
},
};Overriding Configurations
확장된 설정에서 확장된 설정과 동일한 속성을 전달하여 확장된 설정의 설정을 재정의할 수 있습니다.
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",
// output 경로 및 파일 이름 재정의
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].bundle.js",
},
};Concatinating rules and plugins
문자열과 같은 기본 값은 덮어쓰여지지만, 배열 필드는 교체되는 대신 연결됩니다. 이러한 동작은 Webpack이 extends를 처리할 때 내부적으로 사용하는 webpack-merge 때문입니다.
base.webpack.config.js
const webpack = require("webpack");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
},
],
},
plugins: [
new webpack.DefinePlugin({
__DEV__: false,
}),
],
};webpack.config.js
const path = require("node:path");
const webpack = require("webpack");
module.exports = {
extends: path.resolve(__dirname, "./base.webpack.config.js"),
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};병합 후 결과
모듈이 교체되는 대신 규칙과 플러그인 배열이 연결되었습니다.
const webpack = require("webpack");
module.exports = {
module: {
rules: [
// From base.webpack.config.js
{
test: /\.js$/,
use: "babel-loader",
},
// From webpack.config.js (appended)
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
// From base.webpack.config.js
new webpack.DefinePlugin({
__DEV__: false,
}),
// From webpack.config.js (appended)
new webpack.HotModuleReplacementPlugin(),
],
};Loading configuration from external packages
패키지 이름을 extends 속성에 전달하여 타사 패키지에서 설정을 로드할 수도 있습니다. 패키지는 package.json에서 webpack 설정을 내보내야 합니다.
webpack.config.js
module.exports = {
extends: require.resolve("webpack-config-foo"),
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
};2 Contributors
