从零开始是一部极其冗长的小说,从开始到完本历时N年之久
公司的产品功能很丰富,但是缺少一个专门的后台管理系统,现在运营在管理的时候使用的是客户相同的后台,不仅看起来不美观,而且使用起来也不方便,有诸多报表之类的数据不能直观展现,因此我打算自己完成一个后台系统,预计会是一个巨大的坑,但我已经做好了准备,加油!
- 目标技术栈:Babel+React+Antd
第一步 建立项目
我是用的编辑器是HBuilder,自从两年前好友推荐后就留下深刻印象,期间换了不少编辑器,但是换来换去最后又换回了HBuilder。
新建一个文件夹,就叫 ** ManagerCenter ** 吧
使用npm创建项目
npm init
这里要注意,npm的项目名不可以是大写字母,因此驼峰的写法在这里不能用,只能用 - 分隔了,为了省事一路 Enter 点下去,如上,一个新项目就建好了,项目根目录下会出现一个package.json文件夹,此文件夹中包含了该项目的信息:
{
"name": "manager-center",
"version": "1.0.0",
"main": "js/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lirq",
"license": "ISC",
"description": ""
}
接下来我们要安装该项目所需的包,由于我打算在这个项目中使用ES2015的语法,因此我们先从安装Babel开始:
npm install babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
还要安装各种加载器:
npm install style-loader css-loader url-loader file-loader --save-dev
接下来安装最重要的部分
npm install react react-dom --save-dev
到此,此项目需要依赖的包就安装的差不多了,接下来介绍webpack的使用,即webpack.config.js的配置。(我也是摸着石头过河,欢迎拍砖指正):D
在根目录下建立webpack.config.js文件:
下面开始进入不正经模式......
先说Babel的配置:
由于Babel6的使用方式和Babel5完全不同,而且我也没怎么使用过Babel5,因此在这就不啰嗦了,直说Babel6。在webpack.config.js中写如下代码:
module.export={}
额额额额,还是从头开始说webpack.config.js吧
恩,进入正题:
根据我的研究,webpack.config.js由以下几个部分组成:
- entry
- output
- module
- plugins
entry 代表入口文件,具体什么是入口文件,就是webpack要把这个文件经过一番处理后输出,项目使用时要调用的,还可以输入公共包,可以引入多个文件
output 代表输出文件,由path,filename,和**publicPath
**组成,分别表文件路径,文件名称和CDN之类的域名,这个文件名里边还有别的属性,放到后面说
module 我目前使用过的module的内容就是设置加载器loader
plugins 配置插件的地方,常用的有CommonsChunkPlugin