HMR( 模塊熱替換) · 前端

webpack.config.js ``` /* HMR: hot module replacement 熱模塊替換 / 模塊熱替換作用：一個模塊發生變化，只會重新打包這一個模塊（而不是打包所有模塊）極大提升構建速度樣式文件：可以使用HMR功能：因為style-loader內部實現了~ js文件：默認不能使用HMR功能 --> 需要修改js代碼，添加支持HMR功能的代碼注意：HMR功能對js的處理，只能處理非入口js文件的其他文件。 html文件: 默認不能使用HMR功能.同時會導致問題：html文件不能熱更新了~ （不用做HMR功能）解決：修改entry入口，將html文件引入 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: ['./src/js/index.js', './src/index.html'], output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader的配置 { // 處理less資源 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { // 處理css資源 test: /\.css$/, use: ['style-loader', 'css-loader'] }, { // 處理圖片資源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', // 關閉es6模塊化 esModule: false, outputPath: 'imgs' } }, { // 處理html中img資源 test: /\.html$/, loader: 'html-loader' }, { // 處理其他資源 exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true, // 開啟HMR功能 // 當修改了webpack配置，新配置要想生效，必須重新webpack服務 hot: true } }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發環境配置</title> </head> <body> <h1>開發環境配置~~~</h1> <span class="iconfont icon-icon-test"></span> <span class="iconfont icon-icon-test2"></span> <span class="iconfont icon-icon-test3"></span> <span class="iconfont icon-icon-test1"></span> <div id="box"></div> <img src="./imgs/vue.jpg" alt="vue"> <img src="./imgs/react.png" alt="react"> </body> </html> ``` srcj/s/index.js ``` // 引入 import print from './print'; import '../css/iconfont.css'; import '../css/index.less'; console.log('index.js文件被加載了~'); print(); function add(x, y) { return x + y; } console.log(add(1, 3)); if (module.hot) { // 一旦 module.hot 為true，說明開啟了HMR功能。 --> 讓HMR功能代碼生效 module.hot.accept('./print.js', function() { // 方法會監聽 print.js 文件的變化，一旦發生變化，其他模塊不會重新打包構建。 // 會執行后面的回調函數 print(); }); } ``` srcj/s/print.js ``` console.log('print.js被加載了~'); function print() { const content = 'hello print'; console.log(content); } export default print; ``` src/imgs/ ![](https://img.kancloud.cn/51/14/5114dab8150f39bb5b53e34a8e895880_350x133.png) src/media/ ![](https://img.kancloud.cn/e4/68/e4689f3a016db0213a3caeae9c1b2f4c_132x102.png) src/css/iconfont.css ``` @font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.eot?t=1581833245354#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAACFwAAANlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDaIM0ATYCJAMUCwwABCAFhG0HWhtSBxHVm8PIfhzGMck6c2bkTSjPG/sePF+69P3d1UUnhRgUQqyA5BBPz9SlMjBVQJUnnZ0EgFmbnT6jIgzdMR78N0/ZUHpuv/3PMeOtBfPb1iBTzAoK2hvgKIFms6qLCLI7kBP1G8auvIibIYBDX0Yji5as2oSNwdgkgJw6fnQ/dsqIqakUbIRAyYkGeY6FrR6oVOCZ//tSz0SxQWFpjFutO7L4EF7VpKpF2v/v79I+/nh2gJ0GGhgNGJALpc5T6DA5Go2jzDd4gIONQo01bWaVV7Xo//9YuiO1Y/7DA0GhMSABjPLWAHgoZaBqkk2FQNVMKhRUeVRoqFokfjG3sQBwgHbAYyABaQePmRtAoYOtDXzQPKybsYNdjTn6Jzsk51GWn7klN3dTXt7mgoKt+fnbLF3f1wEvObPPi9w9uYWb8oo2F5SUnVZ85UOoH/YoIiT8XBtpjZ08atpabuKrnYdfMP5Xt92j72IdaEPrK7QVhw6yY+4m7agtsw8flfcFS+PyBuBKfv5s18BR7fS2trrdPlec//38zRtMpuH/Fsr27bKQ5/Kdpjg37F3bwtqpU22eLw1zz4W1a25tFpg8l4eaeDGTVeWbSVNxY8+5vudH4mHnVczD8/el+Xl/O9pFIoFf378iAg8mUyTzrBn4y5aV1dQ2eU3OzLKpU7jx+o21bNm6dbbO8oyYrDt1ah2SCeVB2Rt8UuSbeXu9/t6NiEgvkouAvTpSVcL/Su3r/gA+CsQ+o2D/yfvdhXV7283+a7sGgOIzLX1g8H+loV/KRkFr0W8VtewwqsQwWUZutYVyyGI8P02plD4H+JnejpSPo+7SOg6CnRIxULSiD2hsBiMMZjRYuEyGADbzwGEUS0936cQFNGKCwEjuABDa8xsUbYkATXvSEAZTBhZdaYQA7UWDwxbpdEGXoWJOfqGhIXpp/zJ1x66WhT6ovGF4r40lJT7hBQtTRLI4zWZq7LAx9oTPkJMqascmFbgd1vWQ044ZHeORPMsk0bJvirtjc56Fhobopf3L1B27ur3pcz9/w/BeG6tpq3C+YGGaXLI4bYGolXurtmt5TfgMOamidmxSATtWM3nIWb5sRsd47BE/ywR107bKeH719ozHAAdjsSVKtBixJEDw5EMREW5LGHZklCt3FM4BAAAA') format('woff2'), url('../media/iconfont.woff?t=1581833245354') format('woff'), url('../media/iconfont.ttf?t=1581833245354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../media/iconfont.svg?t=1581833245354#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-icon-test:before { content: "\e633"; } .icon-icon-test1:before { content: "\e63a"; } .icon-icon-test2:before { content: "\e640"; } .icon-icon-test3:before { content: "\e644"; } ``` src/css/index.less ``` #box { width: 200px; height: 200px; background-image: url('../imgs/angular.jpg'); background-repeat: no-repeat; background-size: 100% 100%; } ``` 啟動指令為： ``` pnx webpack-dev-server ```