Webpack 핫 모듈 교체(HMR)/핫 업데이트 방법

HMR(핫 모듈 교체) 기능은 애플리케이션 실행 시 페이지를 새로 고치지 않고 필요한 모듈을 교체, 추가, 삭제하는 것입니다. 이번 글에서는 Webpack Now의 HMR(핫 모듈 교체)/핫 업데이트 방법을 주로 소개합니다. 참고용으로 공유하고 올려드립니다.

핫 업데이트라고도 불리는 웹팩 핫 모듈 교체(반응이 필요하지 않음)의 가장 간단한 구성에 대한 기사입니다.

핫 모듈 교체(HMR) 기능은 애플리케이션이 실행 중일 때 페이지를 새로 고치지 않고도 필요한 모듈을 교체, 추가 또는 삭제할 수 있다는 것입니다. HMR은 단일 상태 트리로 구성된 애플리케이션에 유용합니다. 이러한 응용 프로그램의 구성 요소는 "멍청한"("스마트"와 반대) 구성 요소의 코드가 변경된 후에도 구성 요소의 상태가 여전히 응용 프로그램의 최신 상태를 올바르게 반영할 수 있습니다.

webpack-dev-server에는 페이지를 자동으로 새로 고치는 "라이브 새로 고침"이 내장되어 있습니다.

파일 디렉터리는 다음과 같습니다.

1. app

1. a.js

2. comComponent.js

3. index.js

2. node _ 모듈

3. 패키지. json

4. webpack.config.js

comComponent.js가 a.js를 가져왔습니다. index.js는 component.js를 가져옵니다. 모든 파일을 수정하면 핫 업데이트 기능을 얻을 수 있습니다.

가장 중요한 것은 index.js에 다음과 같은 코드가 있다는 것입니다. (핫 업데이트를 완료하는 데 필요)

if(module.hot){
  module.hot.accept(moduleId, callback);
}

다음은 package.json 구성입니다.

{
 "name": "webpack-hmr",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
  "build": "webpack --env production"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "html-webpack-plugin": "^2.28.0",
  "nodemon": "^1.11.0",
  "webpack": "^2.2.1",
  "webpack-dev-server": "^2.4.1"
 }
}

이것만 믿으세요 보세요, 이게 정말 가장 간단한 구성이에요. 그 중 nodemon은 webpack.config.js 파일의 상태를 모니터링하는 데 사용되며 변경 사항이 있는 한 해당 명령이 다시 실행됩니다.

"html-webpack-plugin"은 여기서 생략 가능합니다. 구체적인 구성은 https://www.npmjs.com/package/html-webpack-plugin을 참조하세요.

여기에는 두 가지 명령이 정의되어 있습니다. 하나는 개발 환경에서 사용되는 start이고, 다른 하나는 프로덕션 환경에서 사용되는 build입니다. --watch는 하나 이상의 파일을 모니터링하는 데 사용되며 --exec는 nodemon에서 다른 명령을 실행하는 데 사용됩니다. 구체적인 구성은 https://c9.io/remy/nodemon을 참조하세요.

다음 단계는 webpack.config.js입니다. package.json의 스크립트에 두 가지 명령이 정의되어 있으므로 구성 파일에서 두 가지 상황(개발 및 프로덕션)을 구현해야 합니다. 둘 중 하나의 구성을 수정할 수도 있습니다. 그들을) .

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
 app: path.join(__dirname, 'app'),
 build: path.join(__dirname, 'build'),
};

const commonConfig={
 entry: {
  app: PATHS.app + '/index.js',
 },
 output: {
  path: PATHS.build,
  filename: '[name].js',
 },
 watch: true,
 plugins: [
  new HtmlWebpackPlugin({
   title: 'Webpack demo',
  }),
 ],
}

function developmentConfig(){
 const config ={
  devServer:{
   historyApiFallback:true, //404s fallback to ./index.html
   // hotOnly:true, 使用hotOnly和hot都可以
   hot: true,
   stats:'errors-only', //只在发生错误时输出
   // host:process.env.Host, 这里是undefined，参考的别人文章有这个
   // port:process.env.PORT, 这里是undefined，参考的别人文章有这个
   overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
    errors:true,
    warnings:true,
   }
  },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NamedModulesPlugin(), // 更新组件时在控制台输出组件的路径而不是数字ID，用在开发模式
   // new webpack.HashedModuleIdsPlugin(), // 用在生产模式
  ],
 };
 return Object.assign( 
  {},
  commonConfig,
  config,
  {
   plugins: commonConfig.plugins.concat(config.plugins),
  }
 );
}

module.exports = function(env){
 console.log("env",env);
 if(env=='development'){
  return developmentConfig();
 }
 return commonConfig;
};

Object.sign의 경우 첫 번째 매개변수는 대상 객체이며, 대상 객체의 속성이 동일한 키를 갖는 경우 해당 속성은 소스의 속성으로 덮어쓰여집니다. 이후 소스의 속성은 유사하게 이전 속성을 재정의합니다. 얕은 할당, 개체 복사, 즉 참조 복사에는 =를 사용합니다.

env 매개변수는 cli를 통해 전달됩니다.

그런 다음 현재 디렉터리에 대한 명령줄을 열고 npm start 또는 npm run build를 실행하세요. 전자는 개발 환경에 있으며 출력 파일(메모리에)이 없습니다. 후자를 실행할 때만 출력 파일이 있습니다.

데모 코드는 https://github.com/yuwanlin/webpackHMR

에 있습니다. 위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

ajax의 세 가지 구문 분석 모드 공유

Ajax 및 JSON 구문 분석의 세 가지 구현 비교

.get .post .ajax ztree 및 백그라운드 서블릿 데이터 전송에 대해 논의

위 내용은 Webpack 핫 모듈 교체(HMR)/핫 업데이트 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!