Использование WebPack-Merge как для погрузчиков модуля, так и для плагинов ⇐ Javascript

[Anonymous]

У нас есть несколько файлов конфигурации Webpack, и мне нужно реструктурировать их, чтобы обмениваться общей конфигурацией < /p>
текущая структура файла < /p>

[*]webpack.prod.js
[*]webpack.dev.js> < /br /pielebpack.dev.js>
>
>


[*]webpack.common.js
[*] webpack.prod.js
[*]webpack.dev.jsобразно файл. Тем не менее, существует ряд мест, которые нуждаются в разных правилах слияния, и я не смог найти что -то ясное в использовании различных правил слияния вместе.// webpack.common.js

const commonConfig = {

module: {
rules: [
{
test: /\.css$/,
use: ["css-loader"]
},
]
},
plugins: [
new webpack.EnvironmentPlugin({
MY_ENV_1: "Common_value_1",
MY_ENV_2: "Common_value_2",
MY_ENV_3: "Common_value_3",
}),
],
}

// webpack.dev.js

const devConfig = {

module: {
rules: [
{
test: /\.css$/,
use: ["style-loader"]
},
]
},
}

// webpack.prod.js

const prodConfig = {

module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,]
},
]
},
plugins: [
new webpack.EnvironmentPlugin({
MY_ENV_1: "Prod_value_1",
MY_ENV_2: "Prod_value_2",
}),
],

}
< /code>
Вот мои попытки слияния. Как вы можете видеть, я получил только то, что делал каждый индивидуально, так как я не доволен индивидуальными результатами. Но в конце концов я хотел бы понадобиться только одно слияние, предполагая, что это возможно. < /P>
const { mergeWithRules, mergeWithCustomize, CustomizeRule, unique } = require("webpack-merge");

const merge1 = mergeWithRules({
module: {
rules: {
test: CustomizeRule.Match,
use: CustomizeRule.Prepend,
},
},
})(commonConfig, prodConfig);

const merge2 = mergeWithCustomize({
customizeArray: unique(
"plugins",
["EnvironmentPlugin"],
(plugin) => plugin.constructor && plugin.constructor.name,
),
})(commonConfig, prodConfig);
< /code>
Это текущий выход, который я производил. < /p>
// merge 1 output - I'm not clear what has happened to the test value
{
"module": {
"rules": [
{
"test": {},
"use": [
"Resolved/Path/To/loader.js,
"css-loader"
]
}
]
},
"plugins": [
{
"keys": [
"MY_ENV_1",
"MY_ENV_2",
"MY_ENV_3"
],
"defaultValues": {
"MY_ENV_1": "Common_value_1",
"MY_ENV_2": "Common_value_2",
"MY_ENV_3": "Common_value_3"
}
},
{
"keys": [
"MY_ENV_1",
"MY_ENV_2"
],
"defaultValues": {
"MY_ENV_1": "Prod_value_1",
"MY_ENV_2": "Prod_value_2"
}
}
]
}

// merge 2 output - only one set of ENV values is used
{
"module": {
"rules": [
{
"test": {},
"use": [
"css-loader"
]
},
{
"test": {},
"use": [
"Resolved/Path/To/loader.js,
]
}
]
},
"plugins": [
{
"keys": [
"MY_ENV_1",
"MY_ENV_2"
],
"defaultValues": {
"MY_ENV_1": "Prod_value_1",
"MY_ENV_2": "Prod_value_2"
} // Should also have "MY_ENV_3": "Common_value_3"
}
]
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... nd-plugins