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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JSONObject使用方法详解
Dec 17 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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学习教程之第1天
2008/06/15 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php URL验证正则表达式
2011/07/19 PHP
php 字符串替换的方法
2012/01/10 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
javascript 数组排序函数
2009/08/20 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JS读取XML文件示例代码
2013/11/15 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
json前后端数据交互相关代码
2018/09/19 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
如何基于Python实现自动扫雷
2020/01/06 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
医院护士的求职信范文
2013/12/26 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
个人务虚会发言材料
2014/10/20 职场文书
公司员工体检通知
2015/04/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书