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
  ]
};

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

2 个答案: