hmr webpack 不编译_webpack HMR未加载更改
我正在開(kāi)發(fā)一個(gè)簡(jiǎn)單的靜態(tài)HTML網(wǎng)站 . 現(xiàn)在，只有一個(gè)html文件index.html . 使用Webpack 3.10.0 . 我配置了HMR .
當(dāng)我對(duì)其中一個(gè)樣式表進(jìn)行更改時(shí)，它會(huì)按預(yù)期重新編譯并重新加載：
[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.
但是當(dāng)我對(duì)index.html進(jìn)行更改時(shí)，chrome控制臺(tái)說(shuō)它正在重新編譯，但在重新編譯結(jié)束時(shí)，它說(shuō)'沒(méi)有熱更新'：
[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.
我正在使用單獨(dú)的dev＆prod webpack配置文件，每個(gè)都有一個(gè)共同點(diǎn) . 這是常見(jiàn)的：
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
}
})
]
}
和開(kāi)發(fā)...
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
}
});
總結(jié)
以上是生活随笔為你收集整理的hmr webpack 不编译_webpack HMR未加载更改的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： maven引用servlet_解决Mav
- 下一篇： 单片机如何使用振动传感器801s_振动传