webpack 模組熱更新配置
阿新 • • 發佈:2020-11-04
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('程式碼熱更新,寫自己的程式碼控制') }) }