Question

我正在尝试将我的webpack 1.x迁移到2.x但它无法使用ExtractTextPlugin。

我的网站版本是2.1.0-beta.28和＃34; extract-text-webpack-plugin＆＃34;：＆＃34; 2.0.0-beta.4＆＃34;

这是我的webpack.config.js没有ExtractTextPlugin：

var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

function _path(p) {
  return path.join(__dirname, p);
}

module.exports = {

    context: __dirname,
    entry: {
        app: './assets/js/index',
        vendor: ['jquery', 'moment']
    }, 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name].js'
    },

    devtool: 'inline-eval-cheap-source-map',

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: ["babel-loader"]
        }),
        // new ExtractTextPlugin({
        //     filename: "[name].css",
        //     disable: false,
        //     allChunks: true,
        // }),
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "vendor.js"})
    ],

    module: {
        rules: [

             {
                test: /\.css$/,
                include: path.resolve(__dirname, './assets/css/'),
                use: ["style-loader", "css-loader", "resolve-url-loader"]
                // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader"]})
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/css/'),
                use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"]
                // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader", "sass-loader"]})
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/vendors/'),
                use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"]
                // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader", "sass-loader"]})
            },

            {
                test: /\.jsx?$/, 
                include: path.resolve(__dirname, './assets/js/'),
                exclude: /node_modules/, 
                use: ["happypack/loader?id=jsx"]
            },
            {
                test: /\.png$/,
                use: { 
                        loader: 'file-loader' ,
                        options: {
                            name: '/static/img/[name].[ext]'
                        }
                    }

            }
        ]
    },

    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [ path.resolve(__dirname, 'node_modules')]
    }   
}

所以当我运行webpack时出现了这个错误：配置对象无效。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - configuration.resolve有一个未知的属性“modulesDirectories＆＃39;”。这些属性是有效的： object {alias？，aliasFields？，cachePredicate？，descriptionFiles？，enforceExtension？，enforceModuleExtension？，extensions？，fileSystem？，mainFields？，mainFiles？，moduleExtensions？，modules？，plugins？，resolver？，symlinks？，unsafeCache？ } - configuration.resolve.extensions [0]不应为空。

Answer 1

我找到了解决方案：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            loader: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development 
                fallback: "style-loader"
            })
        }]
    },
    plugins: [
        extractSass
    ]
};

更多信息请访问：https://www.npmjs.com/package/sass-loader

ExtractTextPlugin无法在webpack 2上运行

1 个答案: