집 > 기사 > 웹 프론트엔드 > 웹팩이 핫 모듈 교체를 구현하는 방법

웹팩이 핫 모듈 교체를 구현하는 방법

php中世界最好的语言원래의: 2018-05-02 10:49:121292검색

이번에는 webpack이 hot 모듈 교체를 구현하는 방법과 webpack이 hot 모듈 교체를 구현하는 데 어떤 주의 사항이 있는지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

핫 모듈 교체(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를 실행하세요. 전자는 개발 환경에 있으며 출력 파일(메모리에)이 없습니다. 후자를 실행할 때만 출력 파일이 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!