组团小程序制作_webpack主动打包和热更新的完成方

日期:2021-01-07 类型:行业动态 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

webpack自动打包和热更新的实现方法       这篇文章主要介绍了webpack自动打包和热更新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在package.json中增加一条命令来进行自动打包

cross-env是为了兼容mac windows liunx的环境变量,需要安装。

npm install cross-env -D

 "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

hot module replacemennt

功能:自动刷新页面

配置hot module:

安装react-hot-loader

npm install react-hot-loader -D

在webpack.config.client.js中配置

 const webpack = require('webpack')
 if(isDev){
 config.entry ={
 app:[
 "react-hot-loader/patch",
 path.join(__dirname,'../client/app.js')
 ...省略
 config.plugins.push(new webpack.HotModuleReplacementPlugin())

在client/app.js中配置

 ...省略
 import { AppContainer } from 'react-hot-loader';
 const root = document.getElementById('root')
 const render = Component = {
 aaa.hydrate(
 AppContainer 
 Component / 
 /AppContainer ,
 root
 render(App)
 if(module.hot){
 module.hot.accept('./App.jsx',()= {
 const NextApp = require('./App.jsx').default
 render(NextApp)

通过以上配置就能达到局部热更新了,修改代码,页面会实时修改,不会刷新页面了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。