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 有待研究