基于webpack 3.x + react v16 + antdesign开发环境配置

基于webpack 3.x + react v16 + antdesign开发环境配置

原文连接：基于webpack 3.x + react v16 + antdesign开发环境配置

说明

这篇文章比较适合刚入门react或者webpack的同窗，目的为了减小你们在学习如何配置webpack开发环境时花费的大量时间。

学习一个新的开发模式对于功底不是很厚的同窗来讲是有必定的技术难度的，尤为在配置一些复杂的开发环境时显得很是疲软，新手应该更专一于学习新的技术栈，而不是投入大量的时间精力在工具上。所以我结合本身的开发经验，配置了一份比较完整的react开发配置，但愿可以给同窗们提供一个温馨的环境，在本身有能力配置一套完整的开发环境时，最好仍是回过头配置一份属于你本身的开发环境。

本开发环境采用使用了以下产品：

• webpack 3.x
• react （版本不限制）
• ant design（蚂蚁金服的基于react开发的一套UI库，很是棒，力推）

配置地址

https://github.com/MeteDesign/Webpack

该库具备两个分支，分别是master和antdesign，详细差异将会在下面的分支说明部分解释。

安装

$ git clone https://github.com/MeteDesign/Webpack.git
$ cd Webpack
复制代码

在下载好以后，须要安装下依赖文件：

$ yarn
复制代码

或者

$ npm install
复制代码

**切记：请在开始你的项目以前，请先运行 npm run generdll，该命令是为了生成DLL文件，提高开发环境的编译速度 **

开发环境

$ npm run dev
复制代码

生产环境

$ npm run build
复制代码

运行该命令以后，你将会在根目录看到一个dist文件夹，若是须要部署，请将它放到你的服务器上。

分支说明

master

该分支是一个比较基础的react开发环境，项目架构比较单一，适合刚入门的同窗使用。

说明

当你运行npm run dev，而后在浏览器上输入 localhost:4000，若是你看到以下图所示的界面，那么恭喜你，能够继续你的学习之旅。若是报错，请以issues的形式向我报告，有时间我会第一时间回复你。

特性

在该配置下，你可以使用如下的特性

• 公共chunk抽取
• DLL 支持
• 提取css到一个单一文件中
• 多入口文件支持
• 热替换支持
• 长期缓存支持
• Postcss 支持
• sass/less/css css预处理器支持
• 压缩优化代码支持
• ...

更多的特性请前往 webpack.config.js查询。

antdesign

该分支适配了ant design ui库，是一个比较完整的开发环境，项目架构基本完善，适合已经入门，想要一些更高层次的调整的同窗。

说明

当你运行npm run dev，而后在浏览器上输入 localhost:4000，若是你看到以下图所示的界面，那么恭喜你，能够继续你的学习之旅。若是报错，请以issues的形式向我报告，有时间我会第一时间回复你。

当你输入 localhost:4000/login.html, 你会看到以下所示的登陆页面，一样若是有错，请向我提issues。

该配置文件使用了多入口文件，分别是main和login，若是使用过ant-design-pro的同窗不难会发现，样式很是类似。在搭建项目时，我参考了 ant-design-pro的设计风格。可是在侧边栏部分，我添加了代码使得侧边栏不会随着页面滑动而变化。

特性

在该配置中，你可以使用到如下特性：

• 公共chunk抽取
• DLL 支持
• 懒加载支持
• 提取css到一个单一文件中
• 多入口文件支持
• 热替换支持
• 长期缓存支持
• Postcss 支持
• sass/less/css css预处理器支持
• 压缩优化代码支持
• ...

更多的特性请前往 webpack.config.js查询。其中懒加载功能请按照commom/nav.js中所示，添加你的路由文件来实现懒加载功能。

但愿你们可以批评指出，共勉。