Webpack，禁用匯出SCSS/CSS中參考的資產-有解無憂

在開發中運行 Webpack 時，它會生成正確bundle.js的style.css源映射，但 SCSS 檔案中參考的所有資產都將復制到我的 Webpack 輸出檔案夾，以及它們之前的哈希，如下所示：

Webpack，禁用匯出 SCSS/CSS 中參考的資產

有沒有辦法禁用本地開發的資產散列和復制？我在生產中理解這一點，但在開發時我不需要它。它還會導致變得煩人的未分級更改。

我的 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;
}

uj5u.com熱心網友回復：

如果您使用to傳遞一個options物件，它將停止匯入這些檔案。而且由于您只想為開發禁用，您可以使用該變數，如下所示：url: falsecss-loaderproduction

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/487529.html

標籤：javascript 网页包粗鲁的萨斯加载器

上一篇：如何在discord.js(javascript)中使用陣列設定隨機播放狀態

下一篇：Java遞回問題