webpack自动打包和热更新的实现方法

webpack常用配置

webpack dev server

  • 功能:自动打包文件
  • 配置dev server:在webpack.config.client.js中配置
  const path = require('path');
  const HTMlPlugin = require('html-webpack-plugin');

  // 判断是否是开发环境
  const isDev = process.env.NODE_ENV === 'development'

  const config = {
    entry: {
      app: path.join(__dirname,'../client/app.js')
    },
    output: {
      filename: '[name].[hash].js',
      path: path.join(__dirname,'../dist'),
      publicPath: '/public'
    },
    module: {
      rules: [
        {
          test: /.jsx$/,
          loader: 'babel-loader'
        },
        {
          test: /.js$/,
          loader: 'babel-loader',
          exclude: [
            path.join(__dirname,'../node_modules')
          ]
        }
      ]
    },
    plugins:[
      new HTMlPlugin({
        template:path.join(__dirname,'../client/template.html')
      })
    ]
  }

  //新增
  if(isDev){
    // 开发环境
    config.devServer = {
      host: '0.0.0.0',//可以使用ip访问
      port:'8888',
      contentBase: path.join(__dirname,'../dist'),//打包后的文件
      overlay:{
        errors:true //直接在网页上显示错误
      },
      publicPath:'/public',
      historyApiFallback:{
        index:'/public/index.html'
      }

    }
  }
  module.exports = config;

在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)
   })
 }

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

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

(0)

相关推荐

  • webpack实现热更新(实施同步刷新)

    本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助. 解决方案一: 实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单. 1.webpack命令安装 npm install webpack -g npm init npm init -yes //可以创建默认的package.json npm install webpack --save-dev npm install path fs html-webpack-plugi

  • webpack热模块替换(HMR)/热更新的方法

    这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新. 模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换.增加.删除必要的模块. HMR 对于那些由单一状态树构成的应用非常有用.因为这些应用的组件是 "dumb" (相对于 "smart") 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态. webpack-dev-server内置"live reload",会自动刷新页面.

  • 详解webpack 热更新优化

    前言 随着项目的界面越来越多,webpack的热更新越来越慢,有时会达到5,7s之久,这对于开发效率影响是非常巨大的. 分析过程 于是今天就针对这个分析了一下热更新慢的原因,步骤如下 首先先在package中的启动命令加上 --progress --watch --colors --profile 先解释一下这几个参数的含义 --progress 构建进度 --watch 实时监测 --profile 编译过程中的步骤耗时时间 加上了这几个参数,重启项目,就可以开始观察耗时时间了,修改了某个文件

  • webpack自动打包和热更新的实现方法

    webpack常用配置 webpack dev server 功能:自动打包文件 配置dev server:在webpack.config.client.js中配置 const path = require('path'); const HTMlPlugin = require('html-webpack-plugin'); // 判断是否是开发环境 const isDev = process.env.NODE_ENV === 'development' const config = { ent

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

  • webpack打包、编译、热更新Node内存不足问题解决

    目录 日常先上结论 问题背景 排查问题 总结 日常先上结论 上班的打工开发可以直接在这里看解决方案 修复young object promotion failed Allocation failed - JavaScript heap out of memory报错,全局安装increase-memory-limit这个包就可以解决,安装完后在项目控制台执行increase-memory-limit,然后再运行项目就完事啦,如果遇到其他报错,可以直接看下面第2项解决方案. 所有Webpack编译

  • vue 如何开启或关闭热更新

    目录 开启或关闭热更新 vs开发vue,无法热更新 开启或关闭热更新 在vue-cli工程中,webpack默认是自动启动热更新. 如果不想使用热更新,则需要打开 vue.config.js 文件,找到 devServer,增加 inline: false ,默认情况下是没有这个变量的,如果需要取消热更新才添加. 找不到文件,就直接全局搜索 “devServer”,找到它,然后加上 inline: false. 重启 npm run serve,必须重启! devServer: {     //

  • React Native 实现热更新并自动签名打包功能

    项目背景:手动link的安卓App 1.下载 react-native-code-push npm install --save react-native-code-push 2.在android/settings.gradle文件下新增: include ':app', ':react-native-code-push' project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../no

  • 详解webpack的文件监听实现(热更新)

    前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

  • 关于vue-cli3+webpack热更新失效及解决

    目录 vue-cli3+webpack热更新失效 1.说下起因 2.解决方案 不能进行热更新问题 解决办法 vue-cli3+webpack热更新失效 1.说下起因 A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效.vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装:npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用. github有类似问题h

随机推荐