web-dev-qa-db-fra.com

Impossible de css/scss avec HMR (Hot Module Replacement) avec Webpack 2.2.0 et webpack-dev-server 2.2.1

Versions

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

"webpack": "^ 2.2.0",

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

Issue

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

"webpack": "^ 1.14.0",

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

Ne pouvant plus utiliser HMR css/scss depuis la mise à niveau vers la version 2, la modification des styles déclenche une modification (voir l'exemple de sortie ci-dessous), mais je dois actualiser manuellement la page pour afficher les modifications. La page ne s'actualise pas automatiquement, même si je modifie Si vous modifiez un fichier js après avoir modifié un fichier scss, les modifications sont répercutées lorsque le changement js déclenche un HMR qui inclut également les modifications de style, mais seule la modification des styles sans modification de js nécessite un rafraîchissement manuel de la page.

Des idées si j'ai configuré quelque chose de mal ou ce que je dois faire pour que le css/scss HMR fonctionne?

J'ai également posté le problème ici: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384 mais je ne suis pas sûr qu'il s'agisse d'un problème avec Webpack-dev-server ou de l'extrait -text-webpack-plugin ou tout simplement quelque chose que j'ai fait.

Commande en cours:

npm run dev

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

Configuration avant la mise à niveau: _

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;

Configuration après la mise à niveau:

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;

Exemple de sortie du chargement de la page initiale.

> 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.

Exemple de sortie après modification 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.

Vous pouvez voir que la taille du fichier principal.css a changé, mais la page n'a jamais été actualisée tant que je n'ai pas appuyé sur f5.

webpackwebpack-dev-serverhot-module-replacementextract-text-pluginextracttextwebpackplugin
10
Robert Leggett

pour un meilleur contrôle sur CSS HMR tout en utilisant extract-text-webpack-plugin utilisez css-hot-loader

ci-dessous est mon exemple de code d'utilisation dans la collection de règles 

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

3
prasanth shenoy

Comme indiqué dans la page principale de github de extract-text-webpack-plugin: Mises en garde : "No Hot Module Replacement"

Vous ne devriez pas utiliser ce plugin pendant le développement, il est toujours utile pour créer une compilation pour la production. Vous pouvez créer deux fichiers de configuration Webpack, un pour le développeur et un pour le prod, qui pourraient aider les deux scénarios.

2
Sajid Ali