react环境搭建及文件配置
npm init
npm i webpack -g
npm i webpack -D cnpm i webpack -g
cnpm i webpack -D
npm i webpack-cli -g
npm i webpack-cli -D cnpm i webpack-cli -g
cnpm i webpack-cli -D
npm i webpack-dev-server -g
npm i webpack-dev-server -D cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D
webpack -v
- 官方推荐使用的配置文件:webpack.config.js
- 在项目根目录创建src/main.js入口文件
//从Node中引入path模块,path.resolve()/join()
const file = require('path)
module.exports{
//指定webpack工作模式(两种模式:开发模式(development),打包模式(production))
mode:'development',
//入口配置
//entry:'./src/main.js' //相对路径
//entry:path,resolve(__dirname,'src/main.js') //绝对路径
entry:{
app:file.resolve(__dirname,'src/main.js')
},
//出口配置
output:{
//指定打包结果的输出目录,默认是dist目录,只能使用绝对路径
path:path.resolve(__dirname,'dist'),
filename:'[name].[chunkhash:8].js'
//每次打包时,
clean:true
},
plugins:[
new HtmlWebpackPlugin({
template:file.resolve(__dirname,'../','public/index.html'),
//把js脚本注入在body前
inject:'body',
//指定打包成功后模板的名字
filename:'index.html',
//指定index.html的标题
title:'沐沐',
//指定图标路径
favicon:file.resolve(__dirname,'../','public/index.html'),
}),
],
module:{
//定义模块编译规则和方法
rules:[
//当webpack工作时,遇到.js结尾的文件时,就使用babel-loader进行加载,交给@babel/*进行编译。得到es5代码。
{test:/\.js$/,use:'babel-loader'}
]
}
}
const { merge } = require('webpack-merge') const config = require('./config/config') //公共配置
const serve = require('./config/serve') //开发环境配置
const build = require('./config/build') //打包配置 module.exports = function ( {development} ) {
return merge(config, development ? serve : build)
}
npm i babel-loader -D
react环境搭建及文件配置的更多相关文章
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- React 环境搭建及页面调试方法
React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...
- 关于路由器漏洞利用,qemu环境搭建,网络配置的总结
FAT 搭建的坑 1 先按照官方步骤进行,完成后进行如下步骤 2 修改 move /firmadyne into /firmware-analysis-toolkit navigate to the ...
- 20201205-3 HTML环境搭建与文件基本结构
HTML环境搭建与文件基本结构 HTML的基础 HTML环境搭建 Pycharm 包含全部环境 编写(代码) → 运行浏览器 → 代码检查 Sublime 只是用来编写 HTML 代码: ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- 从零开始react实战:云书签-1 react环境搭建
总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...
- hadoop集群环境搭建之安装配置hadoop集群
在安装hadoop集群之前,需要先进行zookeeper的安装,请参照hadoop集群环境搭建之zookeeper集群的安装部署 1 将hadoop安装包解压到 /itcast/ (如果没有这个目录 ...
- hadoop学习第一天-hadoop初步环境搭建&伪分布式计算配置(详细)
一.虚拟机环境搭建 我们用的虚拟机为vmware,Linux镜像为centOS6.5. vmware安装 安装没什么多说的,一路下一步,但是在新建虚拟机的时候有两个地方需要注意: 1.分配处理器1个就 ...
- PHP LAMP环境搭建及网站配置流程(完整版)
心血来潮想做一个自己的博客网站,写一些文章做技术分享,平时遇到的一些问题的解决办法都记录下来,网站搭建成功,那么第一篇博客自然就是整个网站的搭建以及域名的注册.备案.解析流程,总共分为以下几步: 1. ...
随机推荐
- OpenWrt 20.02.2 小米路由器3G配置CP1025网络打印
家里的施乐 CP116w 工作快五年了终于罢工了. 黑粉报错, 自己也不会拆, 只能搁置了. 后来换了个 HP CP1025. 这个打印机也不错, 墨盒便宜没什么废粉, 就是启动慢一点, 而且 -- ...
- 行列式&矩阵树定理
行列式: 参考 oi-wiki 定义 对于一个\(n*n\)的矩阵A行列式取值(标量) \(det(A)=|A|=\sum\limits_p(-1)^{\tau(p)}\prod\limits_{i= ...
- Spring-Cloud-Alibaba系列教程(一)Nacos初识
前言 在2020年即将开启SpringCloudAlibaba的专题,希望2020年共同学习进步. 学习资料 文档 Naco文档 程序猿DD Spring Cloud Aliabab专题 专题博客 视 ...
- Xmind演讲主题大纲
参考:https://www.bilibili.com/video/BV1Rb411s7VG?p=9
- DAST 黑盒漏洞扫描器 第三篇:无害化
0X01 前言 甲方扫描器其中一个很重要的功能重点,就是无害化,目的是尽量降低业务影响到可接受程度. 做过甲方扫描器,基本上对于反馈都有所熟悉. "我们的服务有大量报错,请问和你们有关么&q ...
- 【Redis】skiplist跳跃表
有序集合Sorted Set zadd zadd用于向集合中添加元素并且可以设置分值,比如添加三门编程语言,分值分别为1.2.3: 127.0.0.1:6379> zadd language 1 ...
- ACM-01背包问题-Python
日后完善 二维数组实现 if __name__ == '__main__': # 背包空间 space = 10 # 默认第一个元素为 0, 仅仅是为了方便理解 weights = [0, 2, 2, ...
- SAP FPM 相关包 APB_FPM_CORE
related interface: APB_FPM_COREAPB_FPM_CORE_4_EXT_SCAPB_FPM_CORE_INTERNALAPB_FPM_CORE_RESTRICTED
- 合宙Air32F103CBT6开发板上手报告
2022年6月初合宙新上市了 Air32F103 系列 MCU, 市面上 STM32F103 的克隆军队又增加了新的一员. 这次不知道是哪家的贴牌, 分 Air32F103CBT6 和 Air32F1 ...
- VisionPro · C# · 界面显示视觉结果图像
程序界面通过 CogRecordDisplay 控件显示视觉运行结果图像. 按指定图像显示,代码如下: using System; using System.Windows.Forms; using ...