记录一次react项目配置过程
1.为什么要配置react而不是脚手架
因为要知其然,最好还要知其所以然!
2.配置对象
webpack webpack-dev-server babel eslint
3.配置过程
1.webpack
第一步:引入必须文件
const path = require("path");
const webpack = require("webpack");//为了使用webpack自带的插件
const htmlWebpackPlugin = require("html-webpack-plugin");//为了使用html插件 功能是动态组合html代码和js文件
const miniCssExtractPlugin = require("mini-css-extract-plugin");//分离和压缩css
module.exports = {}
复制代码
第二步:入口文件
entry:{index:"./index.js" //这儿的index就是output的[name]
}
复制代码
第三部:loader文件
1. file-loader:
1. context - webpack的跟目录
2. publicPath - 要加在静态资源前面的请求路径
3. name - 输出的文件名
4. outputPath - 输出的路径
复制代码
2. url-loader
1.limit - 一个限度小于直接整成base63=4
2 fallback - 大于限度掉用的loader一本为file-loader
复制代码
module:{rules:[{test:/(\.scss)$/,use:[miniCssExtractPlugin.loader,"sass-loader","css-loader"]},{test:/(\.js|\.jsx)$/,use:["babel-loader"]},{test:/(\.png|\.jpg)$/,use:[{loader:"url-loader",options:{limit:3000,fallback:"file-loader",}}]}]},
复制代码
第四步: plugin
plugins:[new htmlWebpackPlugin({template:"./index.html",minify:false,inject:"body"}),new miniCssExtractPlugin()]
复制代码
第五步:优化配置
optimization:{splitChunks:{cacheGroups:{modules:{chunks:"all",test:/.*node_modules.*/,name:"modules",},index:{chunks:"all",test:/\.css$/,name:"index",enforce:true,}}}}
复制代码
第六步:输出
output:{filename:"[name].js",path:path.join(__dirname,"dist"),/*这个只是编译过后文件的输出目录*//*publicPath:path.join(__dirname,"dist")//这个是在css中的路径字符串基本路劲*/}
复制代码
第七部:服务器
//添加mock 在node_modules->webpack-dev-server->.bin->Server.js文件中添加以下代码
let xmDataPath = "E:\\xm\\builder"
app.get('/data/*', (req, res) => {res.setHeader('Content-Type', 'application/json');//res.end();fs.createReadStream(path.join(xmDataPath,req.url)).pipe(res);
});
app.get('/image/*', (req, res) => {res.setHeader('Content-Type', 'application/json');//res.end();fs.createReadStream(path.join(xmDataPath,req.url)).pipe(res);
});
//设置跟目录
devServer:{contentBase:"./dist",host:"127.0.0.1",port:"80"
}
复制代码
配置ESlint
- 创建配置文件.eslintrc.js
module.exports = {"parserOptions":{ecmaVersion:[6,7,8],//支持的版本sourceType:"script",ecmaFeatures:{jsx:true,//是否启用jsx}},parser:"babel-eslint","env": {//使用环境"browser": true,"node": true},"extends": "eslint:recommended",//使用推荐配置rules:{}
}
复制代码
- sublime下安装sublimeLinter
- 配置如下
{"debug": false,"delay": 0.25,"gutter_theme":"Default","linters": {"eslint": {"@disable": false,"args": [],"excludes": []}}
}
复制代码
git push 到仓库
完毕
转载于:https://juejin.im/post/5bb2d0d8e51d450e697381b9
记录一次react项目配置过程相关推荐
- React项目配置axios和反向代理和process.env环境配置等
React项目配置axios和代理和proces.env环境配置等 React项目配置axios和代理和proces.env环境配置等 配置axios和代理 proces.env环境配置 React项 ...
- React 项目配置 Win10 WSL
联系我:最新首发文章合集 前言 团队新启动一个 React 项目, 有些配置命令是 Linux 指令,同事用的 Mac 电脑,我 git clone 下来之后,发现 npm install 和 npm ...
- 记一次node+react项目发布过程(一)--webpack生产环境打包优化
先附上项目效果: 项目地址: http://47.105.144.204/index github: github.com/dsying/reac- 未优化之前 webpack配置文件 const p ...
- MacBook 整个配置过程,供新入手MacBook的同学
这里记录了MacBook 的整个配置过程,可供新入手MacBook和觉得MacBook比较难用的同学参考. 外围拓展 笔记本电脑的特点是携带方便,缺点是屏幕太小,因此你首先需要再申请领用一个外接显示器 ...
- [项目过程中所遇到的各种问题记录]部署篇——项目部署过程中那些纠结的问题-SQLServer...
前一篇文章说了些有关IIS的,这篇则是说SQLServer的,相比IIS来说,SQLServer的配置过程中问题就少了许多,而且都比较有针对性,下面开始记录: 注:由于实际项目的开发都是基于SQL20 ...
- 配置React项目的运行环境
两种配置react项目运行环境的方法 第一种方法,一步步配置项目的运行环境: 1)下载node,在官方网站可以下载,安装步骤不难,差不多一步步意 点next就行: 2)运行cmd 输入node -v ...
- 记录开发移动端项目过程中的各种问题、插件及教程(不定时更新)
本文为整理记录本人开发移动端项目的过程中,针对项目中业务需求所碰到的各种坑.用到的各种插件及教程整理?. 以下为教程整理: 1.再聊移动端页面的适配_Layout, 布局, mobile, CSS 教 ...
- 集成Emscripten+wasm至React项目踩坑记录
前言 需求是有一个C++写的工具包(负责大规模的数据运算). 需要用emscripten是把C/C++编译成WebAssembly,便于在JS环境之后执行. 最终在React项目中调用工具包. 数据类 ...
- 最新版本POI-5.2.0操作Excel本地导入库配置过程记录
本文是一篇基于Java+Eclipse+POI操作Excel配置POI操作记录,希望能够帮助到用得上的朋友.Exce简单易学,作为一种轻量的数据管理工具,还是很受普通用户喜爱.专业的程序员怎样把数据库 ...
最新文章
- MIT请来了一群经济学家,就AI是否会带来大规模失业展开了一场辩论
- jbpm人工终止的开发
- python网站开发实例-【9】Python接口开发:flask Demo实例
- laravel框架cookie应用到中间件的理解
- QGraphicsScene 的简单理解--关于手册的简要翻译
- json_encode 处理中文乱码
- api中文文档 mws_中英文排版规范化 API
- 微型计算机键盘上的西服的间称为,一台完整的微型计算机主要由主机箱. .键盘.鼠标及音箱.打印机组成....
- Mybatis源码之缓存模块分析
- 设置response.setContentType(“application/json;charset=utf-8“)后还是中文乱码
- CSS HTML 常用属性备忘录
- 使用Android OpenGL ES 2.0绘图之一:搭建一个OpenGL ES环境
- anki 新的卡片类型_Anki 常用操作方法合集(一)常用操作1
- r语言kendall协和系数_多变量Kendall协和系数检验.ppt
- 腾讯X5 内核 的导入
- cas java单点登录_(Java)CAS单点登录
- [坐标纠偏] WGS84转GCJ02、BD09,GCJ02转BD09总结
- promise跟ajax区别,Promise和AJAX有什么区别?
- SMAA算法详解 - SMAABlendingWeightCalculationVS
- GEE5:kNDVI植被指数的获取
热门文章
- Oracle数据库adg数据没同步,Oracle 11g备库无法开启ADG的原因分析
- ACM试题 - ASCII码排序 - Java中字符与对应ASCII码的转换
- Robot Framework-Ride界面介绍及库的添加
- Unity 内建数据索引
- [js]jquery里的jsonp实现ajax异源请求
- Spring AOP 面向切面编程
- 常用类回顾之(String类)
- 判断listview是上滑还是下滑的方法
- mysql 1449 : The user specified as a definer ('root'@'%') does not exist 解决方法
- 开心网分析,师从“中国缘”