的WebPack-DEV-服務器不重裝上的HTML或青菜變化

Question

我的項目有這樣的結構：當我使用的WebPack-dev的服務器我啓動它從/根，它加載的應用程序

\root  
    \webpack.config.js 
    \public 
    \ index.html 
    \ ... 
    \ css 
    \ directives 
    \ views 
    \ dist (webpack output) 
     \app.js 
     \ index.html 
     \ app.js.map 
     \ style.css 
     \ style.css.map 

。但是，當我更改sass文件或html文件時，它不會重新加載。 webpack配置有什麼問題？

司令部的WebPack推出：

$ cd root 
$ webpack-dev-server 

Webpack.config.js

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

const webConfig = { 
    entry: path.join(__dirname, 'public', 'js', 'app'), 
    output: { 
    path: path.join(__dirname, 'public', 'dist'), 
    filename: 'app.js' 
    }, 
    resolve: { 
    modules: [__dirname, 'node_modules'], 
    extensions: ['.js'], 
    enforceExtension: false, 
    }, 
    devtool: 'source-map', 
    devServer:{ 
    contentBase: 'public/', 
    publicPath: 'public/' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract({ 
      loader: 'css-loader?modules,localIdentName=[name]__[local]--[hash:base64:5]!sass-loader' 
     }), 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.html$/, 
     loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable. 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}), 
    new HtmlWebpackPlugin({ 
     template: './public/index.html' 
    }) 
    ] 
}; 

module.exports = webConfig; 

Answer 1

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

「內聯」選項增加了「實時重裝」整個頁面。 「熱」選項啓用「熱模塊重新加載」，試圖重新加載更改的組件（而不是整個頁面）。如果我們傳遞這兩個選項，那麼當源文件發生更改時，webpack-dev-server將首先嚐試HMR。如果這不起作用，那麼它將重新加載整個頁面。

嘗試添加以下內容到webpack.config文件：

devServer:{ 
    contentBase: 'public/', 
    publicPath: 'public/', 
    inline: true, 
    hot: true, 
    }, 

如果你願意，你也可以從你的package.json文件調用的腳本。有些東西像：

... 
scripts: { 
    "watch": "webpack-dev-server --progress --colors --hot --inline", 
} 
...