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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
用webAPI实现图片放大镜效果
Nov 23 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生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python模块之paramiko实例代码
2018/01/31 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
selenium如何定位span元素的实现
2021/01/13 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
清华大学自主招生自荐信
2014/01/29 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
治庸问责工作总结
2015/08/11 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js