Webpack，禁用导出 SCSS/CSS 中引用的资产

Question

在开发中运行 Webpack 时，它会生成正确的bundle.js和style.css以及源映射，但是 SCSS 文件中引用的所有资产都将复制到我的 Webpack 输出文件夹，以及它们之前的哈希，如下所示：

有没有办法禁用本地开发的资产散列和复制？ 我在生产中理解这一点，但在开发时我不需要它。 它还会导致变得烦人的未分级更改。

我的 Webpack 配置如下：

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

module.exports = (env, argv) => {

  const hash = generateHash();
  const production = argv.mode === 'production' ? true : false;

  var config = {
    entry: [
      './assets/scripts/src/index.ts',
      './assets/scss/src/style.scss'
    ],
    devtool: production ? false : 'inline-source-map',
    watch: production ? false : true,
    devServer: {
      watchContentBase: true
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    output: {
      filename: production ? `bundle.${hash}.min.js` : 'bundle.js',
      path: path.resolve(__dirname, 'wwwroot')
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: production ? `style.${hash}.min.css` : 'style.css'
      })
    ]
  };

  return config;
};

function generateHash() {
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for (var i = 0; i < 15; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

Answer 1

如果您将带有url: false的options对象传递给css-loader ，它将停止导入这些文件。 而且由于您只想禁用开发，您可以使用您拥有的production变量，如下所示：

 {
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
   {
      loader: "css-loader",
      options: {
        url: production,
      },
    },
    'sass-loader'
  ]
}