Webpack熱模塊替換不注入更新的代碼

Question

我一直在嘗試使用Webpack-Dev-Server來配置Webpack 2熱模塊替換。

webpack.config.js如下：

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

    const HotModuleReplacement = new Webpack.HotModuleReplacementPlugin(); 
    const NamedModulesPlugin = new Webpack.NamedModulesPlugin(); 
    const NoEmitOnErrorsPlugin = new Webpack.NoEmitOnErrorsPlugin(); 

    const extractCSS = new ExtractTextPlugin('main.css'); 
    const extractSCSS = new ExtractTextPlugin('styles.css'); 

    const config = { 
     entry: [ 
      'webpack-dev-server/client?http://localhost:8080', 
      // bundle the client for webpack-dev-server 
      // and connect to the provided endpoint 
     'webpack/hot/only-dev-server', 
     // bundle the client for hot reloading 
     // only- means to only hot reload for successful updates 
     './src/index.js', 
     ], 
     output: { 
      path: path.resolve(__dirname, 'dist'), 
      filename: 'bundle.js', 
      publicPath: 'http://localhost:8080/', 
      hotUpdateChunkFilename: 'hot/hot-update.js', 
      hotUpdateMainFilename: 'hot/hot-update.json', 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.(js|jsx)$/, 
        exclude: [ 
         path.resolve(__dirname, 'node_modules'), 
        ], 
        loader: 'babel-loader', 
        options: { 
         presets: ['react', 'es2015', 'stage-2'], 
        }, 
       }, 
       { 
        test: /\.scss$/, 
        loader: extractSCSS.extract({ 
         fallback: 'style-loader', 
         use: ['css-loader', 'postcss-loader', 'sass-loader'], 
        }), 
       }, 
       { 
        test: /\.css$/, 
        loader: extractCSS.extract({ 
         fallback: 'style-loader', 
         use: ['css-loader', 'postcss-loader'], 
        }), 
       }, 
      ], 
     }, 
     plugins: [ 
      extractCSS, 
      extractSCSS, 
      HotModuleReplacement, 
      NamedModulesPlugin, 
      NoEmitOnErrorsPlugin, 
     ], 

     devtool: 'source-map', 
     devServer: { 
      publicPath: 'http://localhost:8080/', 
      contentBase: './', 
      inline: true, 
      hot: true, 
      historyApiFallback: true, 
      stats: { 
       colors: true, 
      }, 
     }, 
    }; 

    module.exports = config; 

我有了這個文件夾結構：

/ 
/src 
/src/index.js 
/src/index.scss 

，我想我需要使用HMR API在index.js像這樣：

import MockComponent from './MockComponent/MockComponent'; 

export default class App { 
    constructor() { 
     this.mock = new MockComponent(); 
    } 
    render() { 
     return `<div class="element">${this.mock.render()}</div>`; 
    } 
} 

let app = {}; 
app = new App(); 
const mainDiv = document.querySelector('#root'); 
mainDiv.innerHTML = app.render(); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept(); 
} 

問題是，當我在代碼中進行更改時控制檯我：

但隨後的HMR似乎它沒有這樣做所再現的任何變化。

請問有人能幫我解決這個問題嗎？

非常感謝

Answer 1

這個問題似乎是，你沒有disable的ExtractTextPlugin，而在發展模式。在不禁用它的情況下，您傳遞的fallback加載程序將無法運行，在這種情況下，style-loader和ExtractTextPlugin不支持HMR本身。

在生產中，您不希望ExtractTextPlugin被禁用，因此一種方法是使用一個配置將使用--env標誌。請注意，通常建議使用分離配置，一個用於生產，另一個用於開發，儘管您可以使用像webpack-merge這樣的工具來共享通用位。

所以在你的package.json你要更新腳本，然後改變你的配置是一個函數，因此它可以接受env對象作爲參數。

的package.json

{ 
    ... 
    scripts: { 
    "start": "webpack-dev-server --env.dev", 
    "build": "webpack" 
    }, 
    ... 
} 

webpack.config.js

... 

const config = (env = {}) => ({ 
    ... 
    plugins: [ 
    new ExtractTextPlugin({ 
     filename: 'styles.css', 
     disable: env.dev === true 
    }) 
    ] 
}) 

我在這裏不包括大量的簡潔，但應該給你一個不錯的主意。請參閱下面的我使用的版本...

extract-text-webpack-plugin@2.1.0 
style-loader@0.14.0 
webpack@2.2.1 
webpack-dev-server@2.4.2 

它的進口需要注意的是，當你可以devServer實現與hot: true HMR和plugins一個new HotModuleReplacementPlugin()，其他裝載機和需要配置更改生產「生活「在瀏覽器中更改不同類型的代碼...這裏有幾個浮現在腦海：

• Style Loader：如您使用已經
• React Hot Loader：用於反應的組分
• Vue Loader現場裝卸：爲VUE組件

Answer 2

這活重裝已經解決（請參閱本回購https://github.com/andrixb/WebpackSassStarter）：

• 添加在webpack.config.jsHtmlWebpackPlugin具有以下配置：

  new HtmlWebpackPlugin({ title: 'FE Build Setup', hash: true, template: './src/index.html', }),

• 的src文件夾中的index.html那是外面去除靜態腳本和鏈接標籤內移動（index.html現在使用的只是一個模板）

• 從webpack.config.js刪除 在entry

  'webpack-dev-server/client? http://localhost:8080', // bundle the client for webpack-dev-server // and connect to the provided endpoint 'webpack/hot/only-dev-server', // bundle the client for hot reloading // only- means to only hot reload for successful updates

  和在output：

  publicPath: 'http://localhost:8080/', hotUpdateChunkFilename: 'hot/hot-update.js', hotUpdateMainFilename: 'hot/hot-update.json',

• 從開發環境（在webpack.config.js）ExtractTextPlugin由@Skip傑克

• 所建議在webpack.config.js

編輯的 devServer配置