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


Posted in Javascript onJune 24, 2019

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

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

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

Javascript 相关文章推荐
jquery插件之easing使用
Aug 19 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
js实现简单点赞操作
Mar 17 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
Promise扫盲贴
Jun 24 #Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 #Javascript
前端天气插件tpwidget使用方法详解
Jun 24 #Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 #Javascript
JS实现给数组对象排序的方法分析
Jun 24 #Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 #Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
jquery 使用简明教程
2014/03/05 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
python三元运算符实现方法
2013/12/17 Python
Python操作json数据的一个简单例子
2014/04/17 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
pandas值替换方法
2018/07/10 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python如何用filter函数筛选数据
2020/03/05 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
介绍一下JMS编程步骤
2015/09/22 面试题
治超工作实施方案
2014/05/04 职场文书
好学生评语大全
2014/05/05 职场文书
努力学习保证书
2015/02/26 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
党员转正大会主持词
2015/07/02 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
MySQL 数据库范式化设计理论
2022/04/22 MySQL
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL