집 > 기사 > 웹 프론트엔드 > Webpack 핫 모듈 교체 사용에 대한 자세한 설명

Webpack 핫 모듈 교체 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-20 09:43:161593검색

이번에는 웹팩 핫 모듈 교체 사용에 대한 자세한 설명을 가져오겠습니다. 웹팩 핫 모듈 교체 사용 시 주의사항은 무엇인가요?

핫 모듈 교체(HMR) 기능은 애플리케이션 실행 시 페이지를 새로 고치지 않고 필요한 모듈을 교체, 추가, 삭제하는 것입니다. 이 글에서는 주로 웹팩 핫 모듈 교체(HMR)/핫 업데이트 방법을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 드리고 싶습니다. 에디터를 따라가며 살펴볼까요

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

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

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

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

a.js
comComponent.js
index.js

node _ 모듈
패키지. json
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

에 있습니다. 이 글의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목해 주세요. PHP 중국어 웹사이트에서!