sgfswen / webpack_react

A project built by gulp webpack react es6

webpack_react

项目是通过gulp webpack react es6进行构建

##安装 首先需要安装gulp和webpack，全局gulp版本要和项目中保持一致

npm install [email protected] -g

npm install [email protected] -g

##项目结构介绍

• dist是本地版本输出目录
• src是源文件目录
• router是node服务器的路由配置文件
• tpls为html模板文件目录
• views为生成html的配置文件目录
• server.js为node服务器的配置文件
• gulpfile.js是gulp的配置文件
• webpack.config.js是webpack配置文件
• package.json为项目信息的配置文件，包括脚本命令、项目信息、依赖模块（可通过 npm install 安装依赖的模块）

##配置介绍 主要配置为打包入口文件的配置和输出目录， glob用来动态的添加入口文件 加载器和插件的配置详细请看webpack官网文档webpack doc

##服务器配置 项目的使用的本地服务器是用nodejs搭建，通过不同的命令（Linux系统）切换开发/生产环境：

npm run dev //开发环境

npm run pro //生产环境

（windows是 SET NODE_ENV=production/development 然后运行服务器node app.js）

开发环境访问目录为dist,生产环境目录为bin

webpack有一个webpack-dev-server，里面没有使用，如果想用的话，可以去webpack的官方文档看一下怎样用

##webpack

• 模块化：webpack支持主流的模块化标准（AMD、CMD、commonjs、es6加载器），它的**是万物皆模块，不管是image、css、font、js等，都可以当做模块来加载，需要什么样的处理方式，只要在loader中配置就可以（或者在加载模块时说明），很适合与react进行开发，因为react就是组件式开发，并且es6写react很方便
• 项目打包：webpack的核心功能，在没有使用webpack前，项目使用的是gulp对文件进行合并压缩等等去生成线上版本，在打包这一块，gulp需要配置一条长长的生产线来完成整个过程，webpack只需配置打包的入口和出口就基本上能够完成工作了