extract-text-plugin不适用于Webpack 3

Question

我的webpack.config.js

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

module.exports = {
    entry: [
        './src/index.js',
        'react-hot-loader/patch',
    ],
    module: {
        rules: [
            {
                test: /\.(s*)css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader'],
                })
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('app.bundle.css'),
    ],
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

webpack版本为3.10.0，webpack-dev-server版本为2.6.1。extract-text-webpack-plugin版本为3.0.2。在编译或运行时，我没有收到任何错误。我也没有在生成的网页或任何内联css中看到任何链接标签。如果我删除extract-text-webpack-plugin和关联的webpack配置，css将作为内联css加载到style标记中。找不到哪里不对劲？

Answer 1

你不应该在开发模式下使用extract-text-plugin。extract-text-plugin在productiont模式下使用。在开发模式下，只需使用：

{
        test: /\.s?css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "scss-loader" },
        ]
}

你需要在js中内联它，因为这样，例如，热重新加载样式就可以了。

我在您的配置中还缺少的是webpack-html-plugin。这会自动将构建的javascript作为导入添加到html中。

https://github.com/jantimon/html-webpack-plugin