Question

当我尝试跟随instructions使用react-widgets-webpack时 extract-text-webpack-plugin和Webpack 2，我收到以下错误：

错误   ./~/react-widgets-webpack/index.loader.js!./react-widgets.config.js   模块构建失败：错误：中断更改：现在提取只需要一个   单一论点。选项对象或加载器。例：   如果你的旧代码看起来像这样：       ExtractTextPlugin.extract（'style-loader'，'css-loader'）

您可以将其更改为：       ExtractTextPlugin.extract（{fallback：'style-loader'，使用：'css-loader'}）

更改为

styleLoader: require('extract-text-webpack-plugin').extract({
        fallback: "style-loader",
        use: 'css-loader!less-loader'
    })

给出以下错误：

错误 ./~/react-widgets-webpack/index.loader.js!./react-widgets.config.js 找不到模块：错误：无法解析'[object Object]，[object 对象]，[对象对象]，[对象对象]' '/用户/ pbirmingham /开发/ FLA /叉/闪光/闪光'

我的webpack.config.js：

const webpack = require('webpack');
const globalizePlugin = require('globalize-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        app: [
            'react-widgets-webpack!./react-widgets.config.js',
            'bootstrap-loader',
            './js/main.js']
    },
    output: {
        path: './public/',
        filename: 'js/bundle-[hash].js',
    },
    module: {
        rules: [
            {test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader'},
            {test: /\.json$/, use: 'json-loader'},
            {
                test: /\.(css|scss)$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: "url-loader?name=[name].[hash].[ext]&limit=10000&mimetype=application/font-woff"
            },
            {test: /\.(ttf|eot|svg|gif)$/, use: "file-loader?name=[name].[hash].[ext]"},
            {test: /bootstrap.+\.(jsx|js)$/, use: 'imports-loader?jQuery=jquery,$=jquery,this=>window'}
        ]
    },
    plugins: [
        new ExtractTextPlugin({ filename: 'css/main.[contenthash].css'}),
        new globalizePlugin({
            production: false,
            developmentLocale: "en",
            supportedLocales: ["en"],
            output: "globalize-compiled-data-[locale].[hash].js"
        }),
        new HtmlWebpackPlugin({
            template: 'template/index.ejs',
            chunks: ['app']
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        })
    ]
}

还有其他人看到过这种行为吗？

Answer 1

我遇到了同样的问题。在package.json "extract-text-webpack-plugin": "~0.8.0"中设置然后定义ExtractTextPlugin加载程序，如loader: ExtractTextPlugin.extract('style', 'css!less')

如何使用react-widgets-webpack和Webpack 2的extract-text-webpack-plugin

1 个答案: