Webpack output 緩沖區注入 CSS - 如何預防？

Question

編輯：這個問題現在是 null（至少對我來說）。 我發現我的升級故障。

Webpack v4.31.0

我不是大師。 我試圖升級到 v5，一切都壞了。 我已經到了最后期限，所以如果可能的話，請將建議限制在 v4 上。

鑒於此webpack.config.js編譯 SCSS 文件：

// const js removed for simplicity

const css = {
  entry: {
    'frontend.css': `${__dirname}/src/scss/frontend.scss`,
  },
  output: {
    path: `${__dirname}/css`,
    filename: '[name]'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        // module chain executes from last to first?
        use: [
          {
            loader: 'file-loader',
            options: { name: '[name].css', outputPath: '../css/' }
          },
          // how to minimize?
          { loader: "remove-comments-loader" },
          { loader: 'extract-loader' },
          { loader: 'css-loader', options: { url: false, sourceMap: false } },
          { loader: 'resolve-url-loader' },
          { loader: 'sass-loader', options: { sourceMap: false } }
        ]
      },
    ]
  }
};

// Return array of configurations
module.exports = function () {
  return exportModules( [css] );
};

/**
 * Merge filetype configs with shared config and return them as an array of objects.
 * @param objs
 * @return {Array}
 */
const exportModules = ( objs ) => {
  const objArr = [];
  for ( let i = 0; i < objs.length; i++ ) {
    objArr.push( {
      ...config(),
      ...objs[i]
    } );
  }
  return objArr;
};

// Shared config options
const config = function () {
  return {
    mode: 'development',
    stats: {
      // is there a preset that does this?
      colors: true,
      hash: false,
      version: false,
      timings: false,
      assets: false,
      chunks: false,
      modules: false,
      reasons: false,
      children: false,
      source: false,
      errors: false,
      errorDetails: false,
      warnings: false,
      publicPath: false
    }
  }
};

和配置根目錄中的這個命令：

$ webpack

生成的 CSS 文件正在編譯和渲染，其中包含來自lib/MainTemplate.js的一堆語句

/*** see below ***/

#splash-overlay {
  position: fixed;
  z-index: 25000000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #120016;
  display: flex;
  justify-content: center;
  align-items: center;
}

.splash-link {
  text-align: center;
  display: inline-block;
  width: 100%;
}exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/ 

這種行為並不一致，因為有時不同的語句是 output，有時根本沒有。 有沒有辦法在配置 object 中繞過這個 output？ 難道我做錯了什么？

Answer 1

在我看來， exportModules function 中可能存在錯誤。 我不確定，尤其是我使用 webpack v5，但它可能無法正確合並，覆蓋或復制一些共享配置。

也許你應該使用 webpack-merge package 來解決這個問題，然后它可能看起來像

/* Top of the file */
const { merge } = require('webpack-merge');

modules.export = merge(config(), css, js);