webpack.config.js CSS输出已损坏/ ****** /

时间:2019-07-23 14:02:56

标签: webpack webpack-4

我正在尝试使用Webpack从SCSS文件构建CSS文件。看似随机,输出CSS文件包含正确的css样式,但它们后面是一串以/ ****** /开头的行,以及看起来是内部webpack代码的行。有时,我能够成功完成构建,但是随后又重新构建-不做任何更改-输出再次中断。

我已包含文件要点。

https://gist.github.com/lancemonotone/cb1f98e9545875b30592d4d53e9f7c97

webpack.config.js

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

// Config for SCSS files
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/' }
          },
          { loader: "remove-comments-loader" },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'resolve-url-loader' },
          { loader: 'sass-loader' },
        ]
      },
    ]
  }
};

/**
 * 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: 'production',
    stats: {
      colors: true,
      children: false
    }
  }
};

输出CSS文件内容的截断示例:

.some-style{foo: bar;}re__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }

0 个答案:

没有答案