Webpack hot update implementation

Original address: Webpack hot update implementation

Webpack, a generation of gods, a generation of gods. If your webpack and webpack-dev-server versions are greater than 2 and less than or equal to 3.6, please keep reading. Other versions would be a waste of time.

basic configuration

// 入口文件
entry: path.resolve(__dirname, 'index.js')

// 出口文件
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
}

The export file generated by the webpack-dev-server command is invisible in the resource directory (it is said to be saved in memory). Our index.html can boldly reference this "non-existent" file:

<script src="./dist/build.js"></script>

loader configuration

Here only babel-loader is used as an example

module: {
    rules: [
        {
            // /(\.jsx|\.js)$/
            test: /(\.js)$/,
            use: {
                loader: "babel-loader",
            },
            exclude: /node_modules/
        }
    ]
}

.babelrcconfigure

{
  "presets": [
    ["env", { "modules": false }]
  ]
}

devServer deployment

devServer: {
    port: '8080',
    overlay: true,
    proxy: {

    }
}

start command

// --open表示直接打开浏览器，--hot表示开启热更新
webpack-dev-server --open --hot

Latest webpack 4 to be researched