1. 程式人生 > 實用技巧 >webpack 模組熱更新配置

webpack 模組熱更新配置

1、配置webpack不需要安裝什麼,只需要原先安裝的webpack即可配置

const path = require('path')
const webpack = require('webpack')
module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.js'
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    open: true,
    hot: true,    //開啟熱更新
    hotOnly: true   //開啟熱更新失敗,依然不重新整理瀏覽器
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()  // 這個外掛一定要使用
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

2、css-loader 自動配置了熱更新,更改了css,樣式自己就改變了,react、vue框架自身也配置了,如果需要自定義,程式碼如下

if(module.hot){    //在你要監聽的檔案裡面寫
    module.hot.accept('./src',()=>{    // ./src值得是更新檔案路徑
        console.log('程式碼熱更新,寫自己的程式碼控制')        
    })
}