webpack-dev-server hot update

method one

---

first step

npm install webpack-dev-server

The second step

Webpack.config.js configuration file

const path = require('path')
const webpack = require('webpack')   // 引入 webpack

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist'   // 必须加 publicPath
    },
    module: {
        rules: [
            {test: /\.js$/, use: 'babel-loader'}
        ]
    },
    plugins: [
        // new webpack.HotModuleReplacementPlugin()   // 生成热更新文件，文件会有很多 不建议加上。或者用一个清除插件，清除这些文件
    ],
    devServer: {
        contentBase: path.resolve(__dirname, './'),
        port: 8088,
        inline: true,
        hot: true,   // 热加载
        // hotOnly: true,   // 只热加载，不更新页面
        open: true   // 自动浏览器打开
    }
}

third step

Enter the command-line statement

npx webpack-dev-server

Method Two

---

first step

npm install webpack-dev-server
npm install html-webpack-plugin

The second step

Webpack.config.js configuration file

const path = require('path')
const webpack = require('webpack')   // 引入 webpack
const HtmlWebpackPlugin = require('html-webpack-plugin')   // 引入 html-webpack-plugin

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {test: /\.js$/, use: 'babel-loader'}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({   // ------
			template: "public/index.html
		})
    ],
    devServer: {
        contentBase: path.resolve(__dirname, './'),
        port: 8088,
        inline: true,
        hot: true,   // 热加载
        // hotOnly: true,   // 只热加载，不更新页面
        open: true   // 自动浏览器打开
    }
}

third step

npx webpack-dev-server --mode development

Note : Generally webpack-dev-serverthe resulting file is in memory, not in the dist/file, so you can speed up the loading efficiency, not BUG