Impossível HMR (Hot Module Replacement) css / scss com Webpack 2.2.0 e webpack-dev-server 2.2.1

10

Versões

"extract-text-webpack-plugin": "^ 2.0.0-rc.2",

"webpack": "^ 2.2.0",

"webpack-dev-server": "^ 2.2.1"

Problema

"extract-text-webpack-plugin": "^ 1.0.1",

"webpack": "^ 1.14.0",

"webpack-dev-server": "^ 1.16.2"

Não é mais possível HMR css / scss desde a atualização para a versão 2, a alteração dos estilos aciona uma alteração (consulte a amostra de saída abaixo), mas preciso atualizar manualmente a página para ver as alterações que a página não atualiza automaticamente. Eu faço uma alteração em um arquivo js depois de alterar um arquivo scss, as mudanças são refletidas como o js change aciona um HMR que também inclui as mudanças de estilo, mas somente mudar os estilos sem alterações js requer uma atualização manual da página.

Alguma idéia se eu configurei algo errado ou o que eu preciso fazer para o CSS / scss HMR funcionar?

Também publiquei o problema aqui: link mas não tenho certeza se é um problema de webpack-dev-server ou o problema de extrair-texto-webpack-plugin ou simplesmente algo que eu fiz.

Comando em execução:

npm run dev

"scripts": {
    "dev": "webpack-dev-server --hot --inline"
  }

Configuração antes da atualização:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true });

const config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      {
        test: /\.scss$/,
        loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true')
      }
    ]
  },
  plugins: [
    generateHtml,
    extractCSS
  ]
};

module.exports = config;

Configuração após atualização:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin({ filename: 'styles/[name].css', allChunks: true });

const config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },
  module : {
    loaders : [
      {
        test : /\.(js|jsx)?/,
        include : APP_DIR,
        loader : 'babel-loader'
      },
      {
        test: /\.scss$/,
        loader: extractCSS.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader?modules', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    generateHtml,
    extractCSS
  ]
};

module.exports = config;

Exemplo de carregamento inicial da página de saída.

> webpack-dev-server --hot --inline

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 0e873f689fcea2b7cee6
Version: webpack 2.2.0
Time: 3350ms
          Asset       Size  Chunks                    Chunk Names
      bundle.js     1.1 MB       0  [emitted]  [big]  main
styles/main.css  634 bytes       0  [emitted]         main
     index.html  223 bytes          [emitted]         
chunk    {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
   [19] ./~/react/react.js 56 bytes {0} [built]
   [45] ./~/redux/es/index.js 1.08 kB {0} [built]
  [106] ./~/react-redux/es/index.js 194 bytes {0} [built]
  [129] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [130] ./app/index.js 938 bytes {0} [built]
  [131] (webpack)-dev-server/client?http://localhost:8080 4.66 kB {0} [built]
  [132] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
  [139] ./app/containers/App.js 4.25 kB {0} [built]
  [178] ./~/react-dom/index.js 59 bytes {0} [built]
  [269] ./~/redux-thunk/lib/index.js 529 bytes {0} [built]
  [300] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [305] ./~/url/url.js 23.3 kB {0} [built]
  [307] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [309] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
  [310] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app/index.js 52 bytes {0} [built]
     + 296 hidden modules
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 541 kB [entry] [rendered]
        [0] ./~/lodash/lodash.js 540 kB {0} [built]
        [1] (webpack)/buildin/global.js 509 bytes {0} [built]
        [2] (webpack)/buildin/module.js 517 bytes {0} [built]
        [3] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.77 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/user/users.scss 267 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.81 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/containers/app.scss 307 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.21 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 702 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.87 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/common/common.scss 361 bytes {0} [built]
webpack: bundle is now VALID.

Exemplo de saída após alteração de scss.

webpack: bundle is now INVALID.
Hash: f16b1beda9083db91735
Version: webpack 2.2.0
Time: 251ms
                               Asset       Size  Chunks                    Chunk Names
                           bundle.js     1.1 MB       0  [emitted]  [big]  main
0e873f689fcea2b7cee6.hot-update.json   35 bytes          [emitted]         
                     styles/main.css  626 bytes       0  [emitted]         main
chunk    {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
  [143] ./app/components/navbar/navbar.scss 181 bytes {0} [built]
     + 310 hidden modules
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 541 kB [entry]
         + 4 hidden modules
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.2 kB [entry] [rendered]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 694 bytes {0} [built]
         + 1 hidden modules
webpack: bundle is now VALID.

Você pode ver o tamanho do main.css alterado, mas a página nunca foi atualizada até que eu pressionei f5

    
por Robert Leggett 31.01.2017 в 14:15
fonte

2 respostas

3

para um melhor controle sobre o CSS HMR ao usar o plugin extra-text-webpack-plugin css-hot-loader

abaixo está minha amostra de código de uso na coleção de regras

{ test: /\.css$/, use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })) }

    
por prasanth shenoy 20.04.2018 / 03:45
fonte
2

Como afirmado na página principal do github do plugin extra-text-webpack: Advertências : "Sem substituição do módulo quente"

Você não deve usar este plugin durante o desenvolvimento, ainda é útil para criar build para produção. Você pode criar dois arquivos de configuração do webpack, um para dev e um para prod, que podem ajudar em ambos os cenários.

    
por Sajid Ali 31.01.2017 / 18:20
fonte