webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置
前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的。还在一步步走来,学习了很多。那时候还不会配置,直接从网上下了别人配置好的可以跑的。之后特意花了一段时间好好研究了下webpack,后面可以直接动手做一些基本的配置。webpack很强大,还有许多要学习的地方。
最近学习了挺多知识,堆积着没有记录到博客。找机会慢慢写出,因工作需要,最近干了后端,毕竟是前端出身,前端的知识也没有拉下,(开玩笑的说:没有忘本!),还会继续学习。
下面就分享下我的配置过程
demo项目目录
首先,创建项目目录并且进入项目
mkdir reactDemo && cd reactDemo
新建一个package.json文件,内容如下:
{
"name": "webpack-Demo", //项目名称
"version": "0.0.1", //版本号
"description": "webpack-Demo", //项目描述
"keywords": [ //关键字
"demo",
"webpack"
],
"author": "pmx", //作者
"scripts": { //定义脚本命令 如dev 启动为npm run dev
"dev": "webpack-dev-server --progress --config ./webpack.config.js"
},
"devDependencies": { //开发过程中依赖的包
"antd": "^2.13.10",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-import": "^1.6.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"html-webpack-plugin": "^2.26.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}
从上到下介绍下所使用的依赖包: "antd"是蚂蚁金服开发的一个致力于提升『用户』和『设计者』使用体验的中台设计语言,采用 React封装了一套 Ant Design (官网)的组件库。“babel-core”,"babel-loader" 是使用babel必备的两个依赖,再加"babel-preset-es2015"这个规则(规则可以换成其他种),这三个是babel能使用基础。“babel-plugin-import”是用来按需加载 antd 的脚本和样式的。"babel-polyfill"为了使新的ES5,es6新的内置如Promise等,一些API可使用。详细说明 "babel-preset-react"是解析react的规则, "css-loader","style-loader"是CSS样式的依赖包。"html-webpack-plugin"可以生成创建html入口文件 (可以不需要)。 "react","react-dom" 是react需要的依赖,"webpack","webpack-dev-server"是webpack和帮助自动服务的。
接着新建webpack.config.js,开始设置配置
var path = require("path") var webConfig = {
entry: "./src/index.jsx", //入口文件
output: {
path: path.resolve(__dirname, "dist"), //打包后的文件路径(真实存在)
publicPath: "/",
filename: "bundle.js" //打包后的文件名(存在于内存中)
},
devtool: 'cheap-module-eval-source-map',
devServer: {
/*contentBase: './src', 默认以当前目录为根目录,如果加了此属性,就以src文件为根目录 */
historyApiFallback: true,
inline: true,
port: 9001, //端口9001
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader',
query:{
presets:['es2015','react'], //使用es2015和react规则解析
plugins: [["import", { "libraryName": "antd", "style": "css" }]] //按需引入antd
}
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
} } module.exports = webConfig;
index.jsx里面
"use strict" import React from 'react'
import ReactDOM from 'react-dom'
import 'babel-polyfill'
import App from './App.jsx'
ReactDOM.render(<App />, document.getElementById('app'));
App.jsx里面
import React from 'react'
import {Component} from 'react'
import './index.css'
import { Button } from 'antd'; class App extends Component {
constructor(props) {
super(props)
this.state = {
flag: false
}
} getBgColor() {
this.setState({
flag: !this.state.flag
})
} render() {
return (
<div>
<h1>hello React</h1>
<button type="button" onClick={this.getBgColor.bind(this)}>按钮</button>
<div className={this.state.flag ? 'red' : ''} />
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div> )
}
} export default App
index.css里面
.red {
background: #f90;
width: 100px;
height: 100px;
border: 5px solid blue;
}
最后,使用npm run dev ,这个项目就跑起来了。需要其他的依赖的,可以自己随便添加。thank you
webpack+babel+react+antd技术栈的基础配置的更多相关文章
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- SignalR 在React/GO技术栈的生产应用
哼哧哼哧半年,优化改进了一个运维开发web平台. 本文记录SignalR在react/golang 技术栈的生产小实践. 1. 背景 有个前后端分离的运维开发web平台, 后端会间隔5分钟同步一次数据 ...
- npm+webpack+babel+react安装
npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...
- 用react系列技术栈实现的demo整合系统
引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...
- 一个基于React整套技术栈+Node.js的前端页面制作工具
pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...
- webpack+babel+react操作小结
最近学习了一下Webpack,个人感觉还是非常实用的,现在总结一下自己的学习笔记. 什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...
- Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结
搭建项目架构 目采用Webpack+Vue-router的架构方式,开始安装(一切操作都在windows系统上完成) 1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装 ...
- react native ios 开发,基础配置笔记。
一.获取硬件信息,使用react-native-device-info插件,配置说明: 1.首先需要安装组件:npm install react-native-device-info --save 2 ...
- react native android 开发,基础配置笔记。
一.React-native-device-info https://github.com/rebeccahughes/react-native-device-info 二.修改App名称 三.定位权 ...
随机推荐
- @topcoder - SRM766R1 D1L3@ ShortestMissingSubsequences
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个大小为 G 的字符集,并给定一个长度为 N 的字符串 A ...
- mariadb配置文件优化参数
mariadb数据库优化需要根据自己业务需求以及根据硬件配置来进行参数优化,下面是一些关于mariadb数据库参数优化的配置文件. 1 如下为128G内存32线程处理器的mariadb配置参数优化: ...
- sqlplus连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0解决
sqlplus连接数据库报错SP2-0642: SQL*Plus internal error state 2130, context 0:0:0解决 sqlplus 连接数据库报错SP2-0642: ...
- 单颗GPU计算能力太多、太贵?阿里云发布云上首个轻量级GPU实例
摘要: 阿里云发布了国内首个公共云上的轻量级GPU异构计算产品——VGN5i实例,该实例打破了传统直通模式的局限,可以提供比单颗物理GPU更细粒度的服务,从而让客户以更低成本.更高弹性开展业务. 在硅 ...
- WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping 的解决方法
问题描述:VS2012使用验证控件出现“ WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jque ...
- linux centos 一键安装环境
phpStudy for Linux 支持Apache/Nginx/Tengine/Lighttpd, 支持php5.2/5.3/5.4/5.5切换 已经在centos-6.5,debian-7.4. ...
- Java版各种排序算法 (冒泡,快速,选择,插入)
package com.test4; import java.util.*; //Calendar 显示时间 /** * @author qingfeng * 功能:排序算法 */ public cl ...
- oracle中的闪回
项目中运用: 首先说明:闪回方法有一个前提,就是需要尽早的发现问题,果断的采取行动.若误操作的记录已经在UNDO表空间中被清除,则此方法就不可行了,需要另寻他法. 例如: SELECT * FROM ...
- :after选择器-----分割线
分割线: 让span中的文字覆盖分割线,需要:给div和span设置同样的background-color,并且给span设置z-index. 接下来就是margin和padding的调整了. 效果: ...
- 【Pandas】Pandas求某列字符串的长度,总结经验教训
测试集大小: test.shape(898, 11) 对某列的字符串做统计长度1.for遍历法:start = time.time()for i in test.index.values: test. ...