webpack热更新实现

日期:2018-04-19 17:24作者:Bougie

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