webpack的热模块更新以及WebpackDevServer详解

// 最原始打包
"scripts": {
    "build": "webpack"
},

===
// 如果原文件改变，刷新后可以得到改变后的结果
"scripts": {
    "build": "webpack --watch"
},

安装webpack-dev-server：npm i -D webpack-dev-server

webpack.config.js下的配置

devServer: { // 可以开启一个web服务器
    contentBase: './dist',
    open: true, // 自动打开浏览器
    port: 8888, 
    hot: true, // 开启 Hot Module Replacement 热模块更新
    hotOnly: true // 浏览器刷新
    // proxy: {
    //     '/api': 'http://localhost:3000'
    // }
},

 package.json

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

webpack-dev-server打包后不会生成dist目录，放到了电脑的内存里，提升打包速度

配置 Hot Module Replacement 热模块更新

const webpack = require('webpack');

plugins: [
    new webpack.HotModuleReplacementPlugin()
],