脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 自动打包和热更新

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

 更新时间：2019年06月24日 15:15:23   作者：curry_fe  
这篇文章主要介绍了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)
   })
 }

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

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

您可能感兴趣的文章:

相关文章

  • JS获取父节点方法

    JS获取父节点方法

    在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。
    2009-08-08
  • chrome监听cookie变化与赋值问题

    chrome监听cookie变化与赋值问题

    这篇文章主要介绍了chrome监听cookie变化与赋值问题,cookie监听与赋值操作需要manifest文件里声明权限问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-10-10
  • uniapp下单选框的实现方法详解

    uniapp下单选框的实现方法详解

    在写表单的时候,总会遇到使用单选框或者复选框的时候,下面这篇文章主要给大家介绍了关于uniapp下单选框实现的相关资料,需要的朋友可以参考下
    2022-08-08
  • javascript实现全角半角检测的方法

    javascript实现全角半角检测的方法

    这篇文章主要介绍了javascript实现全角半角检测的方法,涉及javascript针对字符遍历与检测的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • bootstrap-table后端分页功能完整实例

    bootstrap-table后端分页功能完整实例

    这篇文章主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下
    2020-06-06
  • 微信小程序开发常用功能汇总

    微信小程序开发常用功能汇总

    这篇文章主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-02-02
  • js检查是否全是中文

    js检查是否全是中文

    判断是否全是中文的脚本
    2008-09-09
  • layui的布局和表格的渲染以及动态生成表格的方法

    layui的布局和表格的渲染以及动态生成表格的方法

    今天小编就为大家分享一篇layui的布局和表格的渲染以及动态生成表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解JavaScript发送埋点请求的两种方式

    详解JavaScript发送埋点请求的两种方式

    对于发送埋点请求这种应用场景，我们有两种简单的处理方式：动态创建<script>和<img>两种方式。本文就详细讲讲二种方式的实现，需要的可以参考一下
    2022-06-06
  • js使用i18n实现页面国际化的方法

    js使用i18n实现页面国际化的方法

    本篇文章主要介绍了js使用i18n实现页面国际化的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论