Question

我正在使用Gutenberg进行WordPress项目，并且在此项目中，Webpack配置中只有一个JS入口点，名为editor。

尝试依赖时，几个组件将导入SCSS文件，这些文件将命名为editor.scss或styles.scss，具体取决于它们是针对站点的前端还是后端的编辑器。 >

我正在努力了解如何实现，通过像我一样的单个入口点设置，Webpack将与编辑器相关的所有CSS合并到一个文件中，并将与前端有关的所有CSS合并到一个单独的文件中

我尝试了以下配置，但是显然我做错了，因为输出仍然是根据声明的入口点命名的单个CSS文件。

/**
 * This file defines the configuration that is used for the production build.
 */
const { join } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const externals = require('./externals');

/**
 * Theme production build configuration.
 */
module.exports = {
  mode: 'production',
  devtool: 'hidden-source-map',
  context: process.cwd(),

  // Clean up build output
  stats: {
    all: false,
    assets: true,
    colors: true,
    errors: true,
    performance: true,
    timings: true,
    warnings: true
  },

  // Permit importing @wordpress/* packages.
  externals,

  // Optimize output bundle.
  optimization: {
    minimize: true,
    noEmitOnErrors: true
  },

  // Specify where the code comes from.
  entry: {
    editor: join(process.cwd(), 'src', 'index.js')
  },
  output: {
    pathinfo: false,
    path: join(process.cwd(), 'build'),
    filename: '[name].js'
  },

  module: {
    strictExportPresence: true,
    rules: [
      {
        // Process JS with Babel.
        test: /\.js$/,
        include: [join(process.cwd(), 'src')],
        loader: require.resolve('babel-loader')
      },
      {
        test: /styles\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              filename: 'styles.style.css',
              hmr: process.env.NODE_ENV === 'development'
            }
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /editor\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              filename: 'editor.style.css',
              hmr: process.env.NODE_ENV === 'development'
            }
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].style.css',
      chunkFilename: '[id].css'
    })
  ]
};

谢谢！

Answer 1

尝试使用此配置，看看它是否对您有用

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

process.traceDeprecation = true;

module.exports = {
    entry: {
        ...
    },
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

可以找到完整的来源here

单一入口点，但根据导入的CSS文件拆分CSS

1 个答案: