webpack devserver和热模块替换_devserver replace-CSDN博客

本文链接：https://blog.csdn.net/qq_36967515/article/details/122081517

本文详细介绍Webpack配置文件的设置方法，包括开发服务器配置、热更新、文件加载器及插件使用等，帮助开发者快速掌握Webpack的基本配置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在打包的时候如果每次运行都需要执行打包命令，会显的比较麻烦，这个时候可以在package.json中配置 --watch 启动监听，但是如果想要深层次的操作，比如自动打开浏览器，就要启用devserver这个配置了。

"scripts": {
    "start": "webpack-dev-server"
  },

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

module.exports = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	entry: {
		main: './src/index.js'
	},
	devServer: {
		contentBase: './dist',
		open: true,
		port: 8080,
		hot: true, // 开启热模块
		hotOnly: true // 这个即使上边的热模块没有生效，也不让浏览器自动刷新
	},
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		}, {
			test: /\.(eot|ttf|svg)$/,
			use: {
				loader: 'file-loader'
			} 
		}, {
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}, {
			test: /\.css$/,
			use: [
				'style-loader',
				'css-loader',
				'postcss-loader'
			]
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin(['dist']),
		new webpack.HotModuleReplacementPlugin() // 配置热模块重载
	],
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}

import counter from './counter';
import number from './number';

counter();
number();

if(module.hot) {
	module.hot.accept('./number', () => {
		document.body.removeChild(document.getElementById('number'));
		number();
	})
}

参考文档： webpack-dev-server API | webpack 中文文档