Webpack提取文本插件输出多个CSS文件(已缩小和未缩小) [英] Webpack Extract-Text-Plugin Output Multiple CSS Files (Both Minified and Not Minified)

问题描述

我用SCSS编写样式，并且我想使用webpack来构建缩小和不缩小的CSS文件. 所以我设置了webpack.config.js:

I write style in SCSS, and I want to use webpack to build both minified and not minified css files. So I set my 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后，出现一些错误:

But after I run npm run build, I get some errors:

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错误?我该怎么解决?

If my webpack.config.js is error? How should I solve it?

推荐答案

目前使用的配置无法实现.

That is not possible at the moment with the configuration that you are using.

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

可行的解决方案是通过返回数组而不是对象来使用多个配置，然后可以在每个文本中使用diffrent config传递相同的加载器

Viable solution to you problem is to use multiple configurations by returning array instead of object then you can pass the same loaders with diffrent config in each literal

 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 的工具可以将您的配置拆分为单独的文件，删除重复的加载程序等.

Of course you should remove any duplicates that exist... As this can get messy very fast there is a tool called webpack-merge that can split your config into separate files, remove duplicate loaders etc..

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

这篇关于Webpack提取文本插件输出多个CSS文件(已缩小和未缩小)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！