webpack-dev-server 热更新

方法一

---

第一步

npm install webpack-dev-server

第二步

配置 webpack.config.js 文件

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   // 自动浏览器打开
    }
}

第三步

输入命令行语句

npx webpack-dev-server

方法二

---

第一步

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

第二步

配置 webpack.config.js 文件

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   // 自动浏览器打开
    }
}

第三步

npx webpack-dev-server --mode development

注意：一般webpack-dev-server生成的文件是在内存中，不会在dist/文件，这样可以加快加载效率，不是 BUG