webpack热更新实现

作者: Bougie 创建于: 2018-04-19 | Webpack

webpack热更新实现

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

最新的 webpack 4 有待研究

上次更新: 2019-5-4 13:19:36