webpack热更新实现
- 作者：Bougie
- 创建于：2018-04-19
- 更新于：2023-03-09
webpack，一代版本一代神，代代版本出大神。如果你的 webpack 和 webpack-dev-server 版本大于 2 小于等于 3.6，请继续看下去。其它版本就必浪费时间了。
# 基本配置
// 入口文件
entry: path.resolve(__dirname, 'index.js')
// 出口文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
}
使用 webpack-dev-server 命令生成的出口文件在资源目录是看不见的(据说是被保存到内存里面了)。我们的 index.html 可以大胆引用这个“不存在”的文件：
<script src="./dist/build.js"></script>
# loader 配置
这里仅以 babel-loader 为例
module: {
rules: [
{
// /(\.jsx|\.js)$/
test: /(\.js)$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
}
]
}
.babelrc配置
{
"presets": [
["env", { "modules": false }]
]
}
# devServer 配置
devServer: {
port: '8080',
overlay: true,
proxy: {
}
}
# 启动命令
# --open表示直接打开浏览器，--hot表示开启热更新
webpack-dev-server --open --hot