react-todoMVC脚手架
- webpack.config.js
var path = require('path'); // node中的 路径解析的模块
const HtmlWebpackPlugin =require('html-webpack-plugin');
module.exports = {
//入口文件
entry:'./src/app.js',
//出口文件
output:{
//出口文件名称
filename:'index.js',
// 出口文件路径
path:path.resolve( __dirname , 'dist' )
,publicPath:"/"
},
// webpack-dev-server 服务器目录
devServer: {
contentBase: './dist/'
},
//插件
plugins:[
// 自动在出口路劲生成 html文件, 函数可以接受一个对象:template为生成新html文件的模板文件
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
// 模块处理
module:{
//处理规则
rules:[
//处理css
{
//匹配文件
test:/\.css$/,
//使用的loader,处理顺序为从后向前处理
use:['style-loader','css-loader']
},
// 处理文件:img。。。
{
//匹配文件
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
//loader处理文件时的一些配置选项
options:{
//大小限制 (以字节为单位):小于这个限制的会转为 base64
limit:1024
}
}]
},
//处理react JSX 语法 和 ES6语法
{
//匹配文件
test:/\.js$/,
//排除 node_modules文件下的所有文件
exclude: path.resolve( __dirname , 'node_modules' ),
//使用的loader信息
use:{
loader:'babel-loader',
options:{
//使用的预设:env处理ES6语法 , react处理JSX语法 , stage-0处理react对ES6部分语法不支持的问题
presets:[ 'env','react','stage-0']
}
}
}
]
}
}
- package.json
{
"name":"webpack-demo",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"webpack":"webpack",
"start":"webpack-dev-server --open"
},
"author":"",
"license":"ISC",
"devDependencies":{
"babel-cli":"^6.26.0",
"babel-core":"^6.26.0",
"babel-loader":"^7.1.2",
"babel-preset-env":"^1.6.1",
"babel-preset-react":"^6.24.1",
"babel-preset-stage-0":"^6.24.1",
"css-loader":"^0.28.7",
"file-loader":"^1.1.5",
"html-webpack-plugin":"^2.30.1",
"style-loader":"^0.19.0",
"url-loader":"^0.6.2",
"webpack":"^3.10.0",
"webpack-dev-server":"^2.9.7"
},
"dependencies":{
"react":"^16.2.0",
"react-dom":"^16.2.0"
}
}
react-todoMVC脚手架的更多相关文章
- React/VUE 脚手架2.0和3.0
react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...
- 自制的React同构脚手架
代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...
- 如何解决 React 官方脚手架不支持 Less 的问题
说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Les ...
- React 官方脚手架 create-react-app快速生成新项目
进入新公司已经半年了,各个业务线,技术栈都已经熟悉,工作也已经游刃有余,决定慢下脚步,沉淀积累,回顾一下所用技术栈所包含的基本知识,以及再公司中的实战. 首先回顾新项目搭建 react脚手架目前使用较 ...
- React安装 脚手架create-react-app安装步骤及问题
create-react-app 是来自于 Facebook的脚手架,通过该命令我们无需配置就能快速构建 React 开发环境. 安装步骤: 1.先装脚手架 PS:第一次装直接在打开CMD默认 ...
- React用脚手架实际开发项目!
安装脚手架: npm i create-react-app -g 创建项目命令: create-react-app 项目名字 启动命令:yarn start 如果不用脚手架,需要创建一下页面: 再安装 ...
- react用脚手架创建一个react单页面项目,react起手式
官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10 npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下 ...
- 关于React的脚手架
Rewire你的应用 https://ant.design/docs/react/use-with-create-react-app-cn create-react-app (官方脚手架 简称cra) ...
- 自己实现一个自定义React项目脚手架「ReactCli」
前言 首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活.虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活.当然Re ...
- 极简版 react+webpack 脚手架
目录结构 asset/ css/ img/ src/ entry.js ------------------------ 入口文件 .babelrc index.html package.json w ...
随机推荐
- dcoker实战,使用docker部署NodeJs应用
docker简介 docker是一个开源的应用容器引擎,可以为我们提供安全.可移植.可重复的自动化部署的方式.docker采用虚拟化的技术来虚拟化出应用程序的运行环境.如上图一样.docker就像 ...
- Invoke 与 BeginInvoke 应用场景
1.委托中 Invoke , BeginInvoke 特点 Invoke : 同步调用 , 委托在当前线程执行 BeginInvoke : 异步调用 , 通常使用线程池资源执行委托. 2. UI ...
- 微信小程序初识
http://lib.csdn.net/article/wechat/46742 微信小程序的前途和定位有什么疑惑?点进去 简单先记几个印象名词:流量入口,线下是重点,“即用即走”适合低频工具类产品. ...
- cassandra 鉴权
1. 修改cassandra.yaml配置文件.启用用户密码登录形式. authenticator: PasswordAuthenticator authorizer: CassandraAuthor ...
- 简单了解下OSI七层模型的作用以及常见网络协议含义和所用端口
OSI七层模型及每层的作用 包括:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层物理层用来建立.维护.断开物理连接数据链路层建立逻辑链接.进行硬件地址寻址.差错校验等功能网络层进行逻辑地址 ...
- 【前端】Vue2全家桶案例《看漫画》之五、引入axios
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html 项目github地址:https://github.com/shamoyuu/ ...
- Innotop简单介绍
Innotop介绍 Innotop是一款Perl脚本编写.开源.功能强大的MySQ的监控工具,它通过文本模式(命令行模式)监控,功能强大,配置简单,易于使用等等特性.Innotop这个项目位于ht ...
- Java中过滤出字母、数字和中文的正则表达式
1.Java中过滤出字母.数字和中文的正则表达式 (1)过滤出字母的正则表达式 [^(A-Za-z)] (2)过滤出数字的正则表达式 [^(0-9)] (3)过滤出中文的正则表达式 [^(\\u4e0 ...
- WebService之CXF注解之四(测试类)
TeacherTest.java: /** * @Title:TeacherTest.java * @Package:com.test.service * @Description: * @autho ...
- MyEclipse无法部署项目
1 错误描述 2 错误原因 3 解决办法