我正在開發一個簡單的靜態HTML網站 . 現在，只有一個html文件index.html . 使用Webpack 3.10.0 . 我配置了HMR .

當我對其中一個樣式表進行更改時，它會按預期重新編譯并重新加載：

[WDS] App updated. Recompiling...

client?5cf9:222 [WDS] App hot update...

log.js:23 [HMR] Checking for updates on the server...

log.js:23 [HMR] Updated modules:

log.js:15 [HMR] - ./src/styles/app.scss

log.js:23 [HMR] App is up to date.

但是當我對index.html進行更改時，chrome控制臺說它正在重新編譯，但在重新編譯結束時，它說'沒有熱更新'：

[WDS] App updated. Recompiling...

client?5cf9:222 [WDS] App hot update...

log.js:23 [HMR] Checking for updates on the server...

log.js:23 [HMR] Nothing hot updated.

log.js:23 [HMR] App is up to date.

我正在使用單獨的dev＆prod webpack配置文件，每個都有一個共同點 . 這是常見的：

const path = require('path');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

module.exports = {

entry: {

app: './src/js/index.js'

},

devtool: 'inline-source-map',

devServer: {

contentBase: './dist',

hot: true

},

output: {

filename: '[name].bundle.[hash].js',

// path: path.resolve(__dirname, 'dist'),

},

module: {

rules: [

{

test: /\.(png|svg|jpg|gif)$/,

use: [

{

loader: 'file-loader',

options: {

name: '[name].[ext]'

// outputPath: 'img/',

// publicPath: 'img/'

}

}

]

},

{

test: /\.html$/,

use: ['html-loader']

},

{

test: /\.(s*)css$/,

use: ['style-loader', 'css-loader', {

loader: 'postcss-loader',

options: {

plugins: function() {

return [

require('precss'),

require('autoprefixer')

]

}

}

}, 'sass-loader']

}

]

},

plugins: [

new webpack.NamedModulesPlugin(),

new webpack.HotModuleReplacementPlugin(),

new CleanWebpackPlugin(['dist']),

new HtmlWebpackPlugin({

hash: true,

title: 'Thinkpiece Partners',

template: 'src/html/index.html',

inject: 'body'

}),

new FaviconsWebpackPlugin({

// Your source logo

logo: './src/img/icon/icon-1024.png',

// The prefix for all image files (might be a folder or a name)

prefix: 'icons-[hash]/',

// Emit all stats of the generated icons

emitStats: true,

// The name of the json containing all favicon information

statsFilename: 'iconstats-[hash].json',

// Generate a cache file with control hashes and

// don't rebuild the favicons until those hashes change

persistentCache: true,

// Inject the html into the html-webpack-plugin

inject: true,

// favicon background color (see https://github.com/haydenbleasel/favicons#usage)

background: '#fff',

// favicon app title (see https://github.com/haydenbleasel/favicons#usage)

title: 'Thinkpiece Partners',

// which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)

icons: {

android: true,

appleIcon: true,

appleStartup: true,

coast: false,

favicons: true,

firefox: true,

opengraph: false,

twitter: false,

yandex: false,

windows: false

}

})

]

}

和開發...

const path = require('path');

const merge = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {

devtool: 'inline-source-map',

devServer: {

contentBase: path.join(__dirname, "dist"),

port: 8000

}

});

總結

以上是生活随笔為你收集整理的hmr webpack 不编译_webpack HMR未加载更改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。