Если вы установите hot: true
в настройках devServer
в Webpack , тогда замена горячего модуля для CSS будет работать, и изменения будут применены без полной перезагрузки страницы , Но при изменении HTML файлов LiveReload по какой-то причине не работает, вам необходимо обновить страницу sh вручную, чтобы изменения вступили в силу.
Если hot: true
отключен в файле конфигурации devServer
, затем при изменении файлов HTML LiveReload работает нормально, страница перезагружается, но Горячая замена модуля *1016* для CSS не работает, при изменении CSS страница полностью перезагружается.
Это так и должно быть? Почему это происходит, как я могу включить Горячую замену модуля для CSS, но в то же время заставить LiveReload работать при изменении HTML файлов?
Для создания многих HTML файлов я использую плагин HtmlWebpackPlugin
.
Ниже приведены файлы конфигурации:
webpack.common. js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
module.exports = mode => {
const PRODUCTION = mode === 'production';
return {
entry: {
app: './src/index.js',
},
output: {
filename: 'js/[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[path][name].[ext]',
outputPath: 'img',
},
},
],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: false,
template: 'src/index.html',
filename: 'index.html',
}),
new webpack.DefinePlugin({
PRODUCTION: PRODUCTION,
}),
new CopyPlugin([
{ from: 'src/img', to: 'img' },
{ from: 'src/fonts', to: 'fonts' },
]),
],
}
};
webpack.dev. js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = (env, argv) => {
return merge(common(argv.mode), {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
overlay: {
warnings: true,
errors: true
},
port: 8081,
hot: true,
},
watchOptions: {
aggregateTimeout: 100,
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
],
}
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
});
};