我在删除webpack 4中未使用的CSS时遇到问题.似乎大多数CSS纯化插件都依赖于提取文本插件,该插件未针对版本4进行更新.

这是我的命令:

node_modules/.bin/webpack --mode = development --env.operation = separateCSS

要么

node_modules/.bin/webpack --mode = development --env.operation = bundleCSS

这是我的webpack.config.js的一部分:

            rules: [
            // Loader for SASS files
            {
                test: /\.s[ac]ss$/,
                use: [
                    // Use IIFE to choose how to emit the CSS: 1. Extract as separate file 2: Bundle with the JS file
                    (() => { return env.operation == "separateCSS" ? MiniCssExtractPlugin.loader : 'style-loader'; })(),
                    { loader: 'css-loader', options: { importLoaders: 1, url: true } },
                    {
                        loader: 'postcss-loader',
                        options: { …

我已经为VueJS项目创建了webpack配置。我想将样式与javascript代码分开。我使用过mini-css-extract-plugin，但最终我只收到bundle.js文件。此配置有什么问题，哪里有错误？是否有缺少的装载程序。我的配置如下：

import path from 'path';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const devMode = process.env.NODE_ENV !== 'production';

const prodPlugins = [
    new UglifyJsPlugin(),
    new MiniCssExtractPlugin({
        filename: "css/style.css"
    }),
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.optimize\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true
    })
];

const basicPlugins = [
    new CleanWebpackPlugin('dist'),
    new VueLoaderPlugin()
];

const config = {
    entry: {
        bundle: './src/main.js'
    },
    output: { …

我在一个项目中使用 Webpack 4，到目前为止我只需要编译和捆绑样式。没有 Javascript。

这是我的配置：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    'css/bundle': path.resolve(__dirname, 'static/scss/index.scss'),
  },
  output: {
    path: path.resolve(__dirname, 'static'),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        include: path.resolve(__dirname, 'static/scss'),
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

问题是它输出了两个文件：bundle.css 和 bundle.js。有没有办法配置 Webpack 使其不输出 Javascript 包？我试图浏览文档，尝试了十几种不同的东西，但它并没有真正奏效。

这里的一个重要注意事项是，如果我删除 css-loader，捆绑将失败。因此，虽然 css-loader 最有可能负责输出 bundle.js 文件，但我不完全确定如何避免使用它。

我正在使用MiniCssExtractPlugin在我的react应用程序中延迟加载css文件.

我已经为MiniCssExtractPlugin提供了publicPath选项,但它没有采用此选项值,它采用了output.publicPath选项.

config:
   {
     test: /\.(css)?$/,
     use: [{
            loader : MiniCssExtractPlugin.loader,
            options : {
              publicPath : '../'
            }
          },
          'css-loader'
        ],

     }

任何帮助???

我的应用程序中的样式具有以下结构：

应用

- css/
   - bootstrap/
      - boostrap.less -> has (@import "another.less")
      - another.less
   - common/
      - common.less
   - entries/
      - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less")
      - common.js -> has (import common from "../common/common.less")

现在我需要从导入到条目 bootstrap.js 和 common.js 的样式中创建单独的 CSS-es。

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    entry: {
        "boostrap": ["./css/entries/boostrap.js"]
    },
    module: {
        rules: [
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
}

包.json

{ …

我有一个相当大的 Vue 项目，最初是使用 vue-cli 创建的。我在构建时收到臭名昭著的“无法满足块组所需的顺序”警告。经过多次搜索，我认为解决方案是添加ignoreOrder到初始配置选项，mini-css-extract-plugin但我不知道如何。我认为这应该在 中完成vue.config.js。该文件的内容是：

module.exports = {
  lintOnSave: false
}

我试过了：

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({ ignoreOrder: true })
    ]
  }
}

但这给了我一个错误，我认为这意味着模块被加载了两次。

我试过了：

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      ignoreOrder: true
    }
  }
}

但这给了我一个语法错误。

我如何设置该选项？

我正在进行从 webpack 3 升级到 webpack 5 的项目。在该项目中，它使用 raw-loader 和 extract-text-webpack-plugin 来解析导入的 html 文件（角度组件），然后合并所有 html 文件并输出一个单独的 html。这是 webpack 配置片段\xef\xbc\x9a

.\n.\n.\n# initialize the extractText plugin\nconst extractHTML = new ExtractTextPlugin({\n    filename: `${assetsPattern}.[contenthash].html`,\n    allChunks: true\n.\n.\n.\n# setup the loader\n{\n    test: /\\.html$/,\n    loader: extractHTML.extract('raw-loader')\n}\n.\n.\n.\n

由于它是定制的应用程序，我需要将 html 作为单个文件。

但在 webpack 5 中，extract-text-webpack-plugin 已被弃用。这个插件的推荐替代品是 mini-css-extract-plugin，但它是为 css 指定的，似乎不适用于其他文件类型。通过使用 webpack 5 中的 asset 模块（asset/resource），它将输出多个 html 文件。

目前我被这个问题阻止了，有没有 extract-text-webpack-plugin 的替代品可以满足我的要求？或者还有其他解决方案吗？

我正在使用 mini-css-extract-plugin 提取我的应用程序的 css。它确实有效，因为它正确地提取和拆分了我导入的组件的 css。它还提取到“main.css”，其中是来自非动态导入的模块的样式。

但是，最后一个文件 main.css 未加载到我的应用程序中。我需要手动加载这个文件<link>吗？

网络包：4.12.0

mini-css-extract-plugin: 0.4.0

我的配置：

plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new MiniCssExtractPlugin({
        filename: 'main.css',
        chunkFilename: '[name].[contenthash].css',
    }),
],

module: {
    rules: [
    {
        test: /\.(css|less)$/,
        exclude: /node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[name]__[local]',
                },
            },
            {
                loader: 'less-loader',
                options: {
                    javascriptEnabled: true,
                },
            },
        ],
    }
]

在我的 js 文件“example.js”中，我想分别为桌面版和移动版网站导入两个 .scss 文件“example.scss”和“example.m.scss”。所以我需要三个输出 - example.js、example.scss 和 example.m.scss。我如何在 Webpack 4 中实现它？

JS文件：

// CSS
import '../../css/example.scss';
import '../../css/mobile/example.m.scss';

我当前的 Webpack 配置：

const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        home: './src/AppBundle/Resources/public/js/main_home/main_home.js',
       // ...
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/assets'),
    },

    module: {
        rules: [
            {
                test: /\.scss|.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ] …

描述

在 webpack 中我使用mini-css-extract-plugin：

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

加载块文件中的 scss 文件：

{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, options: {
        hmr: isdev,
        reloadAll: true
      }
    },
    "css-loader",
    "sass-loader",
  ]
}

当我使用动态导入加载 scss 时：

import(/* webpackChunkName: "test" */ 'test.scss')

它将生成一个包含样式的test.[hash].css和一个test.[hash].js：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[15],{

/***/ 81:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ })

}]);

问题

我想最大限度地减少延迟和加载的文件，因此我发现拥有几乎空的test.[hash].js文件是多余的。

您是否有办法将 scss 包含在 …