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\_logs18-01-24T03_09_52_242Z-debug.log

如果我的webpack.config.js有误？我该如何解决？

Answer 1

我修改了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
  ]
};

Answer 2

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

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

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

Webpack Extract-Text-Plugin Output Multiple CSS Files (Both Minified and Not Minified)

javascript

webpack

extracttextwebpackplugin