使用webpack.config.js修改@wordpress/scripts迷你CssExtractPlugin设置

f8rj6qna  于 2023-01-20  发布在  WordPress
关注(0)|答案(2)|浏览(92)

我正在使用@wordpress/scripts软件包,我想修改css文件的输出,使其进入名为css的子文件夹。我如何删除原始MiniCssExtractPlugin设置或修改默认配置中的原始设置?我不知道如何定位已创建的MiniCssExtractPlugin,以便删除或修改它。
我试过加上

plugins: [
  ...defaultConfig.plugins,
  new RemoveEmptyScriptsPlugin(),
  new MiniCssExtractPlugin({
    filename: "css/[name].css",
    ignoreOrder: false,
  }),
]

到项目文件夹中的webpack.config.js文件,并且它确实在名为css的子文件夹中输出css,但是,css也在输出文件夹的根目录中获得输出。

von4xj4u

von4xj4u1#

通过从defaultConfig.plugins数组中过滤出原始MiniCssExtractPlugin来删除它。一种方法是在添加修改后的版本之前使用Array.filter()方法从数组中删除插件的任何示例。

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  ...defaultConfig,
  plugins: defaultConfig.plugins.filter((plugin) => {
    return !(plugin instanceof MiniCssExtractPlugin);
  }),
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      ignoreOrder: false,
    }),
  ],
};

module.exports = config;
snz8szmq

snz8szmq2#

费萨尔的回答给了我正确的方向,所以下面是我最终得到的代码,看起来很有效。

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//Remove default MiniCssExtractPlugin settings
defaultConfig.plugins = defaultConfig.plugins.filter((plugin) => {
  return !(plugin instanceof MiniCssExtractPlugin);
});

module.exports = {
  ...defaultConfig,
  plugins: [
    ...defaultConfig.plugins,
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      ignoreOrder: false,
    }),
  ],
};

相关问题