Hot Reload plan?

[alamchrstn]

is there any plan for supporting hot reload yet?

[sokra]

There is a plan, but not implemented yet.

Eventually this plugin will support HMR.

[alamchrstn]

@sokra awesome will look forward to it. I'm having issue with bundling css at the moment with webpack 4, it's unable to read the changes that I make on the fly even if I try to reload the page. The bundled css seems to still take the old css modules (initial bundle, before the changes were saved). Can I get any help from here? Thanks in advance.

[VictorKolb]

@alamchrstn #23 here a same issue

[krtr]

btw, you can still use style-loader in development, so it is not a blocker in any way

[alamchrstn]

@krtr thanks for the suggestion. could you please give an example? I'm also using other plugins and loaders as well (including isomorphic and HMR). I'm quite new to webpack so yeah I guess a little bit of guidance and example would be very helpful for me. Thanks once again!

[krtr]

@alamchrstn sure,
here is my webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/index.tsx',
    mode: "development",
    devtool: 'inline-source-map',
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    },
    output: {
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.scss/,
                use: [
                    // MiniCssExtractPlugin.loader,
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            module: true
                        }
                    },
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

    serve:
        {
            content: "./src",
            open: true,
        }
};

[alamchrstn]

@krtr thank you so much! will try to use it and will let you know if I'm having issues 😄

[alamchrstn]

@krtr can I use CSS modules with this?

[alamchrstn]

well might as well put my config right, so here it is

import webpack from 'webpack'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import CleanPlugin from 'clean-webpack-plugin'
import { ReactLoadablePlugin } from 'react-loadable/webpack'
import { SRC, APP, STATIC, CONFIG, STYLES, SERVER, ROOT, LOADABLE } from 'configs/paths'
import { isomorphicPlugin } from 'server/isomorphic-tools'

export default {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        imagesearch: [
            'babel-polyfill',
            `${STYLES}/main.css`,
            `${APP}/entries/image-search/index.js`,
            'webpack-hot-middleware/client'
        ]
    },
    output: {
        filename: '[name].[hash].js',
        path: STATIC,
        publicPath: '/'
    },
    resolve: {
        modules: [ SRC, STYLES, 'node_modules' ],
        extensions: [
            '.js', '.jsx', '.css', '.scss'
        ],
    },
    plugins: [
        isomorphicPlugin,
        new webpack.NoEmitOnErrorsPlugin(),
        new CleanPlugin([ 'src/static' ], {
            root: ROOT
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
                'DEBUG': JSON.stringify(process.env.DEBUG),
                'APP_ENV': JSON.stringify('browser')
            }
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[hash].css",
            chunkFilename: "[id].css"
        }),
        new ReactLoadablePlugin({
            filename: LOADABLE
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            filename: 'head'
        }
    },
    module: {
        rules: [
            {
                test: isomorphicPlugin.regular_expression('images'),
                loader: 'url-loader',
                options: { limit: 10240 }
            },
            {
                test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: { limit: 10000, mimetype: 'application/font-woff' }
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: { limit: 10000, mimetype: 'application/octet-stream' }
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader'
            },
            {
                test: /module\.s?css$/,
                include: [ SRC ],
                use: [
                    'style-loader',
                    // MiniCssExtractPlugin.loader,
                    { 
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[path][name]-[local]'
                        }
                    },
                    { loader: 'postcss-loader' }
                ]
            },
            {
                test: /\.s?css$/,
                include: [ SRC ],
                exclude: /module\.s?css$/,
                use: [
                    'style-loader',
                    // MiniCssExtractPlugin.loader,
                    { loader: 'css-loader' },
                    { loader: 'postcss-loader' }
                ]
            },
            {
                test: /\.jsx?$/,
                include: [ APP, CONFIG, SERVER ], 
                // exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [ 'env', {
                            targets: { browsers: [ 'last 2 versions' ] },
                            modules: false
                        } ],
                        'react'
                    ],
                    plugins: [
                        'dynamic-import-webpack',
                        'transform-export-extensions',
                        'transform-decorators-legacy',
                        'transform-class-properties',
                        'transform-object-rest-spread',
                        'add-module-exports',
                        'lodash',
                        'ramda',
                        'react-require',
                        [ 'provide-modules', {
                            'debug': 'debug'
                        } ],
                        "babel-plugin-root-import",
                        'extract-hoc/babel',
                        'react-hot-loader/babel'
                    ]
                }
            }
        ]
    }
}

I have an import of css module inside my image-search app script as well. The main global css is from the main.css

[alexander-akait]

PR welcome 👍

[tim-soft]

Looking forward to HMR!

[OzzyCzech]

There is nice workaround with https://github.com/shepherdwind/css-hot-loader

First detect HMR state:

const isHot = path.basename(require.main.filename) === 'webpack-dev-server.js';

Configure rule:

// ...
{
  test: /\.(less|css)$/,
   use: [
     'css-hot-loader',
     MiniCssExtractPlugin.loader,
     'css-loader',
     'less-loader'
    ]
},
// ...

Setup css filename (there is a limitation in css-hot-loader see https://github.com/shepherdwind/css-hot-loader#attention)

new MiniCssExtractPlugin({
   filename: isHot ? 'css/[name].css' : 'css/[name].[contenthash].css',
   chunkFilename: 'css/[id].css'
}),

[alexander-akait]

@OzzyCzech Can you send PR to implement this feature, looks it is not hard

[OzzyCzech]

or maybe @shepherdwind can help us with that

[devanflaherty]

Might be a dumb question. But would HMR work if we just disabled mini-css-extract for local development?

…

On Apr 5, 2018, 12:59 AM -0600, Roman Ožana ***@***.***>, wrote: or maybe @shepherdwind can help us with that — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Bnaya]

@devanflaherty that what's i do :P

[devanflaherty]

@Bnaya : What are you doing to disable it?
Extract Text Plugin had an option to 'disable' and I haven't seen that in the docs.

[sorcal]

@devanflaherty you're right, that solution works in simple case (when you just need to create 1 css file). However, I couldn't make it working when I needed just a part of css bundle.

[sorcal]

What are you doing to disable it?

@devanflaherty, I just removed MiniCssExtractPlugin from webpack plugins and replaced MiniCssExtractPlugin.loader with 'style-loader' in rules

[Bnaya]

More or less:

module.exports = async function(envCliArgs = {}, argv = {}) {
  const isHot = !!argv.hot || !!argv.hotOnly;

          use: [
            {
              loader: isHot ? "style-loader" : MiniCssExtractPlugin.loader,
            },

  if (!isHot) {
    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: "[name].bundle.[chunkhash].css",
        chunkFilename: "[id].[chunkhash].css",
      }),
    );
  }

[leebenson]

Is there any plan to make this plugin directly compatible with style-loader?

In my Launch.js CSS/Sass/Less/PostCSS preset, I'm using Mini-CSS-Extract to extract styles via the client config, along with css-hot-loader on top of it to push hot reloads.

I could put this inside the server config and just leave the client config to use style-loader, but that breaks the general model I've employed with Launch.js to have presets use the client config when bundling stuff that will ultimately wind up in a public folder.

The limitation with using css-hot-loader is that the compiled .css must be loaded in the resulting SSR HTML first, whereas style-loader obviously embeds the styles directly in the resulting .js entry chunk, making it useful to test in scenarios where a SSR hasn't been provided.

[ScriptedAlchemy]

Hey guys, Im going to open a PR for HMR support, I've currently got it working on my local machine. <3

It'll be proper HMR, no style-loader injecting strings back into the page. Real CSS files :)

[anthonyhastings]

Sounds great @zackljackson! This feature is my only block from moving away from ExtractTextPlugin to the best of my knowledge.

[yantakus]

@ScriptedAlchemy, any news on the PR?

[ScriptedAlchemy]

@yantakus @anthonyhastings currently have it released under one of the React Universal umbrellas

https://www.npmjs.com/package/extract-css-chunks-webpack-plugin

If theres a desperate need - use that, mini-css doesn't play nicely with Facebooks CRA async hooks. So my focus is to bring facebook back as a dependency (they used me up till webpack 4) which also means supporting async tapping out of context.

It seems to be working just fine with my Universal community - had about 100k new downloads added & nobody having much problems

[alexander-akait]

@ScriptedAlchemy why require implement new extract plugin? You can send PRs and use official plugin

[ScriptedAlchemy]

Yeah but I have my own infrastructure im worried about. mini-css is a stop-gap for future native webpack based style handling, you guys probably already have this problem solved for WP5

Ive got my own ecosystem and a lot of dependents to look after under it. I just wanted HMR so I built it, my changes might not fit Webpacks plans and this plugin isn't under active development, or doesn't seem to be, the PRs dont seem to move quickly either... likely for good reasons, I have no doubt.

If I were closer to the internal Webpack community / a member of some Webpack affiliated groups - id probably focus significently on Webpack architecture. But being out the loop & relatively disconnected from the plans or actions of Webpack means it sounds like more red tape to wade through.

Love Webpack and would love to maintain it / help maintain it. Especially given my enterprise architectural background, but life is much easier as a collaborator .vs contributor.

The group I work with currently, I am part of the internal team - so I can design things geared toward future implementations. Knowing little about Webpack 5 & having no influence whatsoever within the Webpack community means it serves me better to engineer my own solutions where I am well informed of my own roadmaps.

As of right now, all I know is Webpack 5 will handle CSS. I invest into teams I have the privilege to work internally with / be informed as an internal level member.

CSS is a relatively small task, I am currently working on some far larger changes around build orchestration. Im able to trick and hook into Webpack enough to pull off most of what I need, but at some point ill have to start opening pull requests to its core - perhaps at that point in time Ill look at a bundled update.

Dont mean to be rude about it, and I really love the work the Webpack team does, and I'd love to contribute in some meaningful way. But I dont know the roadmaps beyond some public info here and there - its easier for me to just go through the core and take what I need. That being said, if theres ever a nice opportunity to collaborate - im down. Mad respect to you guys and all your work, I built my career around advanced Webpack architecture & LOSA systems.

Ill happily switch focus to mini-css assuming I can get some plans the webpack team has over WP5-WP6. Whats it take to become an official member/collaborator of WP? Worth a shot asking - seems like theres going to be some overlaps in our work down the line, based on what I've seen in the core codebase. Id prefer to work on webpack rather than hack my way into its runtime just to do the same thing you guys are likely planning to do.

DM me on Twitter or something ScriptedAlchemy

Again mad love for the work you guys have done

[alexander-akait]

/cc @TheLarkInn @sokra

[marcofugaro]

Any update on this? I'm using this plugin and I am faving a FOUC in development mode

[ScriptedAlchemy]

Style loader will always fouc. It requires JavaScript to have fully executed. Unlike css usually works. It has to be appended by js

[Jessidhia]

The FOUC should only happen if CSS source maps are enabled, as style-loader uses blob URLs then and those require a tick until they are considered loaded. Plain <style> tags take effect synchronously.

[leebenson]

Can I suggest you take a look at my ReactQL stater kit - I have this plugin working with HMR in dev, as well as alongside PostCSS, Sass, Less and Styled Components:

https://github.com/leebenson/reactql

It might help give you a starting point on issues such as avoiding FOUC (which doesn’t happen in my kit).

[leebenson]

And specifically, this is the Webpack loader tasked with CSS transpilation:

https://github.com/leebenson/reactql/blob/master/src/webpack/css.ts

[marcofugaro]

@Kovensky thank you! Disabling the sourceMap options of the css-loader takes away the FOUC.

So there isn't a way to use the css sourcemaps in dev without the FOUC?

[alexander-akait]

Done in master, will be release in near future

[jakeNiemiec]

Nice! Allow me to save anyone else a few clicks by linking the PR: #334