提取文本插件不适用于 Webpack 3答案

【问题标题】：extract-text-plugin not working with Webpack 3提取文本插件不适用于 Webpack 3
【发布时间】：2018-09-16 23:21:55
【问题描述】：

我的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 加载。不知道怎么回事？

【问题讨论】：

标签： webpack sass-loader extract-text-plugin

【解决方案1】：

您不应该在开发模式下使用 extract-text-plugin。 extract-text-plugin 用于生产模式。在开发模式下，请使用：

{
        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

【讨论】：