从零开始是一部极其冗长的小说，从开始到完本历时N年之久
公司的产品功能很丰富，但是缺少一个专门的后台管理系统，现在运营在管理的时候使用的是客户相同的后台，不仅看起来不美观，而且使用起来也不方便，有诸多报表之类的数据不能直观展现，因此我打算自己完成一个后台系统，预计会是一个巨大的坑，但我已经做好了准备，加油！
- 目标技术栈：Babel+React+Antd
第一步 建立项目
我是用的编辑器是HBuilder，自从两年前好友推荐后就留下深刻印象，期间换了不少编辑器，但是换来换去最后又换回了HBuilder。
新建一个文件夹，就叫 ** ManagerCenter ** 吧
Paste_Image.png
使用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文件：
Paste_Image.png
下面开始进入不正经模式......
先说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
网友评论