web-dev-qa-db-ja.com

Webpack2.2.0およびwebpack-dev-server2.2.1でcss / scssをHMR（ホットモジュール交換）できません

バージョン

"extract-text-webpack-plugin"： "^ 2.0.0-rc.2"、

"webpack"： "^ 2.2.0"、

"webpack-dev-server"： "^ 2.2.1"

問題

"extract-text-webpack-plugin"： "^ 1.0.1"、

"webpack"： "^ 1.14.0"、

"webpack-dev-server"： "^ 1.16.2"

バージョン2にアップグレードしてから、css/scssをHMRできなくなりました。スタイルを変更すると変更がトリガーされます（以下の出力サンプルを参照）が、ページを手動で更新して、ページが自動更新されないことを確認する必要があります。 scssファイルを変更した後にjsファイルに変更すると、変更はjs変更がHMRをトリガーするときに反映されます。これには、スタイルの変更も含まれますが、jsを変更せずにスタイルを変更する場合は、手動でページを更新する必要があります。

何か間違った設定をした場合、またはcss/scss HMRを機能させるために何をする必要があるかについてのアイデアはありますか？

私もここに問題を投稿しました： https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384 しかし、それがwebpack-dev-serverの問題かどうかはわかりませんまたはextract-text-webpack-pluginの問題または単に私が行ったこと。

実行中のコマンド：

npm run dev

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

アップグレード前の構成：

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;

アップグレード後の構成：

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;

サンプルの初期ページロードを出力します。

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

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.

Main.cssのサイズが変更されていることがわかりますが、f5キーを押すまでページが更新されませんでした

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

extract-text-webpack-pluginの使用中にCSSHMRをより適切に制御するには、 css-hot-loader を使用します。

以下は、ルールコレクションの使用コードサンプルです。

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

3
prasanth shenoy

Extract-text-webpack-pluginのgithubメインページに記載されているように：警告：「ホットモジュールの交換なし」

開発中はこのプラグインを使用しないでください。本番用のビルドを作成するのに役立ちます。 2つのwebpack構成ファイルを作成できます。1つはdev用、もう1つはprod用で、両方のシナリオに役立つ可能性があります。

2
Sajid Ali