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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
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中设置index.php文件为只读的方法
2013/02/06 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php权重计算方法代码分享
2014/01/09 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
28个JS验证函数收集
2010/03/02 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
js尾调用优化的实现
2019/05/23 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
新学期教师寄语
2014/04/02 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
导游词之镜泊湖
2019/12/09 职场文书