我对 express + webpack 比较陌生，所以我不清楚这是否有意，如果不是，如何正确配置它。问题在于使用 mini-css-extract-plugin 时创建的附加资产和入口点。

网络包配置：

Extract = require('mini-css-extract-plugin');
path = require('path');
Write = require('write-file-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    demo_scripts: path.resolve('server', 'scripts', 'demo.js'),
    demo_styles: path.resolve('server', 'styles', 'demo.css')
  },
  output: {
    path: path.resolve('.tmp'),
    filename: '[name].js'
  },
  plugins: [new Write(), new Extract()],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        ]
      },
      {
        test: /\.css/,
        use: [
          {
            loader: Extract.loader
          },
          {
            loader: 'css-loader'
          }
        ]
      } …

这是我在我的尝试vue.config.js：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true,
          },
        },
      },
    },
  },
  css: {
    sourceMap: devMode,
    extract: {
      filename: 'main.css',
    },
  },
};

我的输出目录中有多个css文件，我想将所有css文件合并/优化到一个文件中。我有通过动态导入创建的多个块，不确定是否是原因。

在具有以前的CLI的旧webpack模板中，我使用extract-text-webpack-plugin了该工作，并且该工作正常。

我在以下问题中找到了一些讨论，但在提出此问题时尚无解决方案。

• mini-css-extract-plugin＃41
• mini-css-extract-plugin＃52

问题

有没有 Webpack 配置专家可以告诉我为什么我在运行时无法将我的 css 提取到 dist 文件夹中npm run build？回购在这里：https : //github.com/damodog/webpack4-boilerplate

更多信息

总而言之，我一直在研究Webpack 指南文档，一切都进展顺利。js 和 css分别通过<link>和<script>标签注入到我的 index.html 文件中。我已经安装了各种加载器、插件等，并将我的配置拆分为公共（共享）、开发和生产文件（根据文档），生活很好。

我碰巧做了一些调整，包括查看代码拆分动态导入、添加路径别名、将 js 移动到 js 文件夹等，并注意到当我npm run build突然运行构建时，我的 css 没有被添加到 dist 文件夹中。我恢复了动态导入内容的试用更改并尝试恢复其他更改，但仍然遇到相同的问题。令人恼火的是，此时我还没有添加 git，所以没有清楚地了解我为定位我所做的更改所做的“调整”。

发生什么了

当我运行我的 watch 任务时npm start，styles.scss 文件（导入到主 index.js 文件中）被编译成 css，并且在我的本地主机中查看时，生成的 app.css 文件被注入到 index.html 页面中。都是肉汁。 <link href="css/app.css" rel="stylesheet">

当我运行npm run buildcss 文件时，应该将 css 文件复制到 dist 文件夹中，应该添加一个哈希 ID，并且应该缩小 css。这是有效的（就像我上面说的那样）并且我可以在构建步骤中看到 css 文件（请参阅下面的第一个资产。顺便说一句，与下一个屏幕截图相比，这里忽略了 js 捆绑文件中的差异。这是我在玩代码拆分时）。

现在，当我运行它时，css 没有捆绑在一起（见下文）。 …

当我 Webpack 我的项目使用 MiniCssExtractPlugin 将 css 分成文件时，它会创建 main.css 文件，但从不将链接写入我的 html 文件。

这是我的 webpack.config.js ：

const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const dev = process.env.NODE_ENV ==="dev"
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let cssloaders = [MiniCssExtractPlugin.loader, {loader: 'css-loader', options:{importLoaders: 2, modules: true } } ]


if(!dev) {
    cssloaders.push( {
        loader: 'postcss-loader',
        options : {

            plugins: (loader) => [


              require('autoprefixer')( { browsers : ['last 2 versions', 'ie > 8'] 
              }),
            ]
        },
})

}

let config = { …

这是关于 ionic 的错误，我刚刚从 IONIC 4 升级到 IONIC 5。我还将我的 Nodejs 升级到最新版本 12.16.4。现在，我在离子项目上执行离子服务时遇到错误。在这方面你能帮我一下吗？

问题

当我运行npm run buildGatsby 项目时，我收到多个同类警告：

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/MineralsHeading/MineralsHeading.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/MineralsSubtitle/MineralsSubtitle.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added: …

我使用 Nextjs 并使用 Sass 来实现样式。在生产模式下，我看到很多 css 文件以顺序方式加载。我只想加载一个CSS。经过一番搜索，我发现 MiniCssExtractPlugin 很有用，可以在 next.config.js 中使用。我不知道如何使用它。谁能帮我？

const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

// next.js configuration
const nextConfig = {
  images: {
    domains: ['ibexcdn.com'],
  },
};

module.exports = withPlugins(
  [
    [
      nextTranslate,
      {
        webpack: (config, { isServer, webpack }) => {
          return config;
        },
      },
    ],
    withBundleAnalyzer,

    [
      withPWA,
      {
        pwa: {
          disable: process.env.NODE_ENV === "development",
          dest: …

我正在使用网络包。我需要将 css 文件作为字符串加载，我可以使用 css-loader 来完成此操作，但我还需要使用 MiniCssExtractPlugin 将 css 直接注入到 DOM 中。但是，如果我使用 MiniCssExtractPlugin，当我尝试导入 css 时，我会收到一个空对象。

import bootstrapStyle from 'bootstrap/dist/css/bootstrap.css';

console.log(bootStrapStyle); // empty object

网页包配置

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

有没有办法同时实现两者呢？

我需要将 css 作为字符串，以便将其注入到 Web 组件中。

我使用以下webpack.config.js文件来构建两个 CSS 文件（editor.css 和 style.css）和一个 JS 文件（block.build.js），并利用该mini-css-extract-plugin插件：

// Load webpack for use of certain webpack tools and methods
const webpack = require( 'webpack' );
// For extracting CSS (and SASS) into separate files
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

// Define JavaScript entry points
const entryPointNames = [ 'blocks', 'frontend' ];

// Setup externals
const externals = {};
// Setup external for each entry point
entryPointNames.forEach( entryPointName => {
  externals[ '@/lg6' + entryPointName ] = { …

当我尝试为 mini-css-extract-plugin 使用加载器时，webpack 返回以下错误：

/node_modules/mini-css-extract-plugin/dist/loader.js:122
    for (const asset of compilation.getAssets()) {
                                    ^

    TypeError: compilation.getAssets(...) is not a function or its return value is not iterable

我需要插件并在我的 prod 配置文件中调用加载程序：

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new MiniCssExtractPlugin({filename: "[name].[contentHash].css"}), 
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: …