Question

当我尝试添加sass-loader并运行webpack时，dist文件夹中有多个chunck .css文件，而不仅仅是捆绑的一个名为“ style.css”的文件。

我的dist输出文件夹如下：

0.e749007119be51de03e4.js  1.e749007119be51de03e4.js  bundle.e749007119be51de03e4.js
0.style.css                1.style.css

我想这是因为Mini-css-extract-plugin，但我不知道如何解决它。

这是我的webpack文件：

const webpack = require('webpack');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ROOT = resolve(__dirname);
const SRC = resolve(ROOT, 'src');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    bundle: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?reload=true',
      resolve(SRC, 'client', 'index.js'),
    ]
  },
  output: {
    path: resolve(ROOT, 'dist', 'client'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        include: resolve(__dirname, 'node_modules', 'react-toolbox'),
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64:5]'
            }
          },
          // 'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        exclude: resolve(__dirname, 'node_modules', 'react-toolbox'),
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpe?g|svg|png|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ]
};

有什么想法吗？

Answer 1

从文档中检查这段代码

module: {
  rules: [
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader',
      ],
    }
  ]
}

如果仔细查看，您会发现它在开发人员模式下使用style-loader，在生产环境下使用MiniCssExtractPlugin.loader。因此，在生产中它将为css生成另一个文件。

您需要做的是这样

在脚本部分的package.json文件中，您需要像这样传递环境变量devMode

"scripts": {
  "webpack": "webpack",
  "start": "npm run webpack -- --env.mode=development"
}

然后在您的webpack.config.js文件中执行此操作

module.exports = (env) => {
  const devMode = env.mode === 'development'
  return {
    mode: env.mode, // will be development
    devtool: ...,
    entry: { ... },
    output: { ... },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }          
      ]
    }
  }
}

应该没关系，希望对您有所帮助。

Answer 2

这种方式存在两个问题。如果我想使用类似html-webpack-plugin的插件，则index.html文件将不再充满。其次，MiniCssExtractPlugin的正常行为不应该是创建文件style.css，就像我在构造函数中精确说明的那样？

否，因为您有异步块，所以它将为从这些异步块中删除的每种样式创建一个style.css。

我向您保证，如果您使用的是html-webpack-plugin，它将可以正常工作。只是没有添加它，因为那些css并非来自其中一个入口点。这就是为什么它不直接插入html的原因。我有一个类似的项目，它运作完美。

如果未从入口点发出这些消息，则一旦请求了这些块，webpack将动态加载这些消息。

大文件会伤害用户。代码拆分始终是所有问题的答案！

Mini-css-extract-plugin不会将我的css与sass捆绑到一个文件中

2 个答案: