Extract-Text-плагин не работает с 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 в режиме разработки. Извлечение-текст-плагин используется в производственном режиме. В режиме разработки, пожалуйста, просто используйте:

{
        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