extract-text-plugin not working with Webpack 3

Question

My 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 version is 3.10.0, webpack-dev-server is version 2.6.1. extract-text-webpack-plugin version is 3.0.2. I am not getting any errors during compilation or during run time. I don't see any link tag in the generated webpage or any inline css too. If I remove extract-text-webpack-plugin and the associated webpack config, the css is loaded as inline css in style tag. Can't figure out what's wrong?

Answer 1

You shouldn't use the extract-text-plugin in development mode. The extract-text-plugin is used in productiont mode. In development mode please just use:

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

You want it inlined in js because then hot reloading of styles for example will work.

What I am also missing in your config is the webpack-html-plugin. This automatically adds the built javascript as an import to your html.

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