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加载。无法弄清楚出了什么问题？

Answer 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

extract-text-plugin不能与Webpack 3一起使用

1 个答案: