React(脚手架)——webpack

首先我们回顾一下webpack知识点,我重新新建了文件夹并--save-dev安装了webpack与webpack-cli

这步骤就不演示了,然后快速配置初始化webpack


并在index.html中引入dist下的 index.js,此时没有生成,打包的时候就可以看到了,注意这里是两条下划线__,图上面是不对的

在app下的index.js中随意写个方法


接着我们使用webpack --mode production/development 成功打包
页面也显示了js的内容

接下来配置一下服务器,先安装webpack-server cnpm i -D webpack-dev-server


现在我们运行npm run start即可,那此时是没办法热更新的,因为我们html引入的是打包之后的js
如果要自动更新,给予一个缓存目录


这个目录不需要在目录下创建,不改变即可,这样就可以了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,295评论 0 21
  • 序言 本人之前都是利用大牛们提供配置好的项目,然后在本地配置npm install,最后运行npm run dev...
    lilyping阅读 8,759评论 11 103
  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
    不忘初心_9a16阅读 3,281评论 0 17
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,360评论 4 31
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,547评论 1 32