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