2

当我尝试添加 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',
    }),
  ]
};

任何的想法 ？

4

2 回答 2

2

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

不，因为你有异步块，它将为从这些异步块中删除的每个样式创建一个 style.css。

我向您保证，如果您使用的是 html-webpack-plugin，它会起作用。它只是没有添加在那里，因为那些 css 不是来自入口点之一。这就是为什么它没有直接插入到 html 中。我有一个类似的项目，它运行良好。

如果这些不是从入口点发出的，那么一旦请求这些块，webpack 就会动态加载这些块。

大文件危害用户。代码拆分始终是一切的答案！

于 2018-08-16T13:51:50.550 回答
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']
        }          
      ]
    }
  }
}

应该没问题，希望对你有帮助。

于 2018-08-16T12:53:42.353 回答