Mini-css-extract-plugin: Advanced example is not working

[EddyVinck]

I tried to follow the advanced example, but the devMode ? 'style-loader' : MiniCssExtractPlugin.loader, part always seems to use style-loader.

My scripts

"scripts": {
    "test": "test",
    "build": "webpack-dev-server --config webpack.config.js --mode development", // uses style-loader
    "prod": "webpack --config webpack.config.js --mode production" // uses style-loader
  },

Am I missing something?

This is my config:

const webpack = require('webpack');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: './src/index',

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        new MiniCssExtractPlugin({
            // fallback: "style-loader",
            // filename: 'styles/[name].css',
            filename: devMode ? '[name].css' : 'styles/[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
        new UglifyJSPlugin(),
        new HtmlWebpackPlugin({
            title: "Output management",
            template: 'src/assets/html/index.html'
        }),
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src"),
                loader: 'babel-loader',

                options: {
                    presets: ['env']
                }
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/fonts/'
                        }
                    }
                ]
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },

    devServer: {
        contentBase: "./dev",
        compress: true,
        port: "9000"
    },
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    resolve: {
        alias: {
            fontello: path.resolve(__dirname, 'src/assets/icons/fontello-icons')
        }
    }
    // devtool: 'source-map' // CSS source not shown in devtools
};

[EddyVinck]

I fixed it by splitting my config into a development and a production file, but I would still like to know how to make this work like in the example.

[alexander-akait]

@EddyVinck What not workings? mini-css-extract-plugin doesn't works in HMR mode right now

[pause13th]

@evilebottnawi he meant the ternary operator for devMode ? 'style-loader' : MiniCssExtractPlugin.loader, is not working, basically it checks what loader to use depending which mode its running.

Been trying to make this work but to no avail, currently commenting out manually, hope someone could help this out :)

[pokkur]

@EddyVinck I would appreciate it if you could give me instruction on how to fix it?

[EddyVinck]

@pause13th hit the nail on the head. The example should use different loaders for production and development but it always picks the style loader.

I managed to work around this by having two different configs but that's not really the issue here. The issue is that there is an example in the readme that doesn't work.

[tiendq]

Actually it caused by a bug with Webpack mode configuration. I have created a repo to clarify the issue and way to fix here: mini-css-extract-plugin-advanced-example

The Advanced example of this plugin needs to be updated too, will make a PR soon :)

[pause13th]

@Tiendq Nice, I try implementing the fixes, but still fail miserably :P i'll probably wait a little more lol

in case anyone run into this problem like me
https://stackoverflow.com/questions/11928013/node-env-is-not-recognized-as-an-internal-or-external-command-operable-comman#11928210

[tiendq]

@pause13th How could it still fail? :)

[eoghanmccarthy]

@EddyVinck Could you post your separate webpack.common.js / .dev.js / .prod.js files? I'm struggling with configuring this plugin in that way.

[danburzo]

In Webpack 4, you're encouraged to use the mode option to either production or development. Setting the mode __does not__ update process.env.NODE_ENV to production therefore the advanced example will always run with style-loader.

I think we should update the examples in this repo to reflect a _working_ solution for conditionally using mini-css-extract-plugin depending on the mode, but how does that solution look?

[th-santos]

This worked for me: https://github.com/webpack/webpack/issues/6460#issuecomment-364286147

[th-santos]

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/154#issuecomment-390476748:

I fixed it by splitting my config into a development and a production file, but I would still like to know how to make this work like in the example.

Try this solution: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/104#issuecomment-382724024

• For Mac & Linux run NODE_ENV=production webpack --mode production in npm script.
• For Windows run SET NODE_ENV=production && webpack --mode production.
• For a cross-platform solution use cross-env and run cross-env NODE_ENV=production webpack --mode production.

[xqk1]

Defining process.env.NODE_ENV in the Webpack 4 is a Webpack Plugin, it’s the reason why it not working.When we use it const devMode = process.env.NODE_ENV !== 'production'; on the top, it still not defined.

[alexander-akait]

Docs have been updated, also hmr option will be removed in next version, we will automatically enable HMR code if you use https://webpack.js.org/plugins/hot-module-replacement-plugin/ (for example when you use hot: true for webpack-dev-server)