Webpack Extract-Text-Plugin 输出多个 CSS 文件（缩小和未缩小）

Question

我在 SCSS 中编写样式，我想使用 webpack 来构建缩小和非缩小的 css 文件。 所以我设置了我的 webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractSASS = new ExtractTextPlugin('assets/styles/[name].css');
const extractMiniSASS = new ExtractTextPlugin('assets/styles/[name].min.css');

module.exports = {
    entry: './Scripts/main.js',
    output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSASS.extract({
                    use: ['css-loader', 'sass-loader'],
                }),
            },
            {
                test: /\.scss$/,
                use: extractMiniSASS.extract({
                    use: [{ loader: 'css-loader', options: { minimize: true } }, 'sass-loader'],
                }),
            },
            {
                test: /\.js$/,
                use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }],
            },
        ],
    },
    plugins: [new webpack.optimize.UglifyJsPlugin(), extractSASS, extractMiniSASS],
};

但是在我运行npm run build 之后，我得到了一些错误：

ERROR in ./SCSS/main.scss
Module build failed:
$primary_color: #99dd00;
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
      in D:\Test\WebpackTest\CSSLoaderTest\SCSS\main.scss (line 1, column 1)
 @ ./Scripts/main.js 3:0-28
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!node_modules/css-loader/index.js??ref--1-1!node_modules/sass-loader/lib/loader.js!SCSS/main.scss:
       [0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?{"id":2,"omit":0,"remove":true}!./node_modules/css-loader?{"minimize":true}!./node_modules/sass-loader/lib/loader.js!./SCSS/main.scss 159 bytes {0} [built]
        + 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! cssloadertest@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the cssloadertest@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\nodejs\node_cache\_logs\2018-01-24T03_09_52_242Z-debug.log

如果我的 webpack.config.js 出错了？我该如何解决？

Answer 1

目前您使用的配置无法做到这一点。

https://github.com/webpack/webpack/issues/5433

解决您的问题的可行方法是通过返回数组而不是对象来使用多个配置，然后您可以在每个文字中传递具有不同配置的相同加载器

 module.exports = [{
    entry: './Scripts/main.js',
    output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractMiniSASS.extract({
                    use: [{ loader: 'css-loader', options: { minimize: true } }, 'sass-loader'],
                }),
            },
            {
                test: /\.js$/,
                use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }],
            },
        ],
    },
    plugins: [new webpack.optimize.UglifyJsPlugin(), extractMiniSASS],
},
{
entry: './Scripts/main.js',
output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
module: {
    rules: [
        {
            test: /\.scss$/,
            use: extractSASS.extract({
                use: ['css-loader', 'sass-loader'],
            }),
        },
    ],
},
plugins: [extractSASS],
},

]

当然，您应该删除所有存在的重复项... 由于这会很快变得混乱，因此有一个名为 webpack-merge 的工具可以将您的配置拆分为单独的文件，删除重复的加载器等。

https://github.com/survivejs/webpack-merge

Answer 2

我修改了webpack.config.js。试试这个。

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractSass = new ExtractTextPlugin({
  filename: "assets/styles/[name].css"
});

const extractMiniSASS = new ExtractTextPlugin({
  filename: "assets/styles/[name].min.css"
});

module.exports = {
  entry: './Scripts/main.js',
  output: {
    path: path.resolve(__dirname, 'wwwroot/'),
    filename: 'scripts/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015']
            }
          }
        ]
      }, {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: "css-loader"
            }, {
              loader: "sass-loader"
            }
          ],
          fallback: "style-loader"
        })
      }
    ]
  }
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    extractSASS,
    extractMiniSASS
  ]
};