基于 Webpack 的 React 单页面应用脚手架

Crius

基于 webpack 的 react 单页面应用通用脚手架 2.0.0

如何开始新的项目

1. 修改package.json

根据自己项目情况填写：

2. 修改README.md

3. npm install 安装依赖

4. npm run dll 生成依赖文件（重要）

开发流程

开发

进入开发模式（启动本地服务）

npm run dev

自动生成雪碧图（可选）

执行命令之前，在css/sprite 中加入需要生成雪碧图的icon

npm run sprite

构建

构建开发/线上环境的代码到build目录，执行该命令时会自动调用代码分析功能，查看各模块代码占比情况

npm run build （lib/下的文件是第三方依赖库，如果不修改，lib下的文件只需要上线一次）

上传

上传到测试服务器

npm run upload

脚手架功能点：

1、支持代码压缩与抽取，打包后的代码分为公共依赖库和业务逻辑两类；

2、支持去除打包后代码中的注释等信息；

3、支持打包后代码中插入时间戳；

4、支持react-router + bundle-loader 的按需加载功能；

5、支持scss；

6、支持rem；

7、支持autoprefixer；

8、支持@mixin、%、变量定义的公共scss一次引入，可以实现全局使用；

9、内嵌axios HTTP库；

10、支持ES6语法，且已安装babel-polyfill，用来兼容低端浏览器（如部分华为手机自带浏览器）；

11、支持图片降质、支持小图片转 base64。

12、支持文件上传至page和static/misc服务器，使用 essay-webpack-upload 组件，上传服务器路径可配置；

13、支持devServer本地调试、热更新；

14、内嵌BundleAnalyzerPlugin组件，npm run build 时可查看js文件占比大小；

15、支持自动生成雪碧图和相应scss文件；

16、页面Viewport标签的content属性内含“viewport-fit:cover”，便于适配iPhone X；

17、使用 webpack3.x 的 Scope Hoisting 特性，提升构建打包速度；

18、单独抽离第三方依赖库，在不改变依赖库的前提下，只需上线一次依赖文件，减少页面加载时间。

使用注意事项：

1、该脚手架中默认安装的是 react v16、react-router v4，请注意编码方法与之前版本的差异；

2、使用本脚手架需要有react的基础，了解react-router(https://www.sitepoint.com/react-router-v4-complete-guide/)使用；

3、组件导出时使用 export default withRouter(组件名)，这样组件内都可以获取路由信息；

4、当js/jsx文件里需要引用i里的icon时，使用引入组件的方式。例如，import Banner from './../../assets/i/a.png'；

5、如果项目中的依赖文件已使用懒加载功能（比如引用了某个组件库，但是懒加载了仅需要的组件），则该文件不要放到vender中，否则会全部加载；

6、当使用npm run sprite自动生成雪碧图时，提前将需要生成雪碧图的icon放入css/sprite的文件夹内，会自动生成雪碧图和相应的scss文件，雪碧图sprite.png自动插入i/，_sprite.scss自动放入css/；

7、如果有多个@mixin、%、变量定义的公共的scss文件，需要手动添加 webpack.config.js -> sass-resources-loader -> resources，一次引入可以实现全局使用；

8、postcss.config.js 里的 browsers 默认配置是兼容手机端各大浏览器，如果是在PC端使用，请根据项目需求进行修改。

• react-router 4.0 官网