Webpack Extract Text Plugin - Webpack Node API 中的 css-loader 问题答案

【问题标题】：Webpack Extract Text Plugin - css-loader problems in Webpack Node APIWebpack Extract Text Plugin - Webpack Node API 中的 css-loader 问题
【发布时间】：2017-03-13 10:38:00
【问题描述】：

我想要达到的目标如下：我有一个快速服务器，它在 webhook 上应该重新生成我的静态生成的 web 应用程序。我正在使用 webpack 来做到这一点。如果我从 webpack 的 CLI 生成静态站点，一切都像魅力一样。但是，如果我从节点中导入 webpack 配置，我会收到 Webpack 选项验证错误：

- configuration.module.rules[4].loader should be one of these:
  non-empty string | non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]

调试了一下，发现在我使用WebpackExtractTextPlugin的地方添加了一个loader，即loader：

{ loader: 1178, options: [Object] }

这是我共享的 webpack.js 的样子：

module.exports = (env) => ({
    context : path.resolve(__dirname, '..', 'entries'),
    output  : {
        path       : path.resolve(__dirname, '..', '..', 'build'),
        filename   : '[name].js',
        publicPath : '/'
    },
    plugins : [
        new webpack.EnvironmentPlugin({
            // ...
        }),
    ],
    module : {
        rules : [
            {
                test    : /\.js$/,
                loader  : 'babel-loader',
                exclude : /node_modules/,
                options : {
                    babelrc : false,
                    presets : ['es2015', 'stage-0', 'react'],
                }
            },
            {
                test   : /\.json$/,
                loader : 'json-loader'
            },
            {
                test   : /\.(jpg|jpeg|png|gif|ico)$/,
                loader : 'file-loader?name=img/[name].[ext]'
            },
            {
                test   : /\.svg$/,
                loader : 'file-loader?name=svg/[name].[ext]'
            },
            {
                test   : /\.less$/,
                loader : ExtractTextPlugin.extract({
                    fallback : 'style-loader',
                    use      : [
                        {
                            loader  : 'css-loader',
                            options : {
                                importLoaders   : 1,
                                modules         : true,
                                minimize        : env !== 'dev',
                                sourceMap       : env === 'dev',
                                discardComments : { removeAll : true },
                                localIdentName  : env === 'dev' ? '[path][name]-[local]-[hash:base64:3]' : '[hash:base64:5]'
                            }
                        },
                        {
                            loader  : 'less-loader',
                            options : {
                                sourceMap  : env === 'dev',
                                modifyVars : lessConfig
                            }
                        }
                    ]
                })
            },
            {
                test   : /\.css$/,
                loader : ExtractTextPlugin.extract({
                    fallback : 'style-loader',
                    use      : {
                        loader  : 'css-loader',
                        options : {
                            minimize  : env !== 'dev',
                            sourceMap : env === 'dev'
                        }
                    }
                })
            }
        ]
    },
    // ...
})

我的webpack.static.js 将上述内容与此合并：

module.exports = (env) => merge.smart(webpackConfig(env), {
    entry : {
        static : [
            'babel-polyfill',
            './static'
        ]
    },
    output : {
        path          : path.resolve(__dirname, '..', '..', 'build', 'static'),
        libraryTarget : 'umd',
        publicPath    : '/'
    },
    externals : vendorConfig,
    plugins   : [
        new ProgressBarPlugin(),
        new ExtractTextPlugin({
            filename  : 'client.css',
            allChunks : true
        }),
        new StaticSiteGeneratorPlugin({ paths })
    ],
    module : {
        rules : [
            {
                test   : /\.js$/,
                loader : 'babel-loader',
                query  : {
                    presets : ['es2015', 'stage-0', 'react'],
                    plugins : ['system-import-transformer']
                }
            }
        ]
    },
    target : 'node'
})

有没有人知道那个额外的加载器可能来自哪里，或者我做错了什么导致这个问题结束？？

我正在使用： webpack@2.2.1 extract-text-webpack-plugin@2.1.0

【问题讨论】：

当它与 webpack CLI 一起工作时，问题几乎肯定出在你的节点构建脚本中。为了能够帮助您，您需要发布您的节点脚本。 webpack 配置本身运行良好，与节点 API 一起使用也同样有效。

标签： webpack-2 extract-text-plugin

【解决方案1】：

没关系。问题是我需要来自同样受 webpack 捆绑的服务器的 webpack 配置。

我将构建静态站点的部分移动到在不同端口上运行的自己的脚本/服务器中，现在一切都像一个魅力:)

【讨论】：