使用Rock生成的项目，支持ES6语法, React, Vue, Less, Css, 图片。同时为生产环境提供了代码压缩，图片压缩，为开发环境提供了热加载，自动刷新，source-map的配置。
本篇将对这些配置做简单说说明。
Javascript
- Babel
- React
- Vue
Stylesheet
- Less
- CSS
- Url ('./a.png')
- Autoprefixer
Image / Font
- .jpe?g / .png / .gif / .svg
- .woff / .ttf / .eot / .svg
Production
- UglifyJs, Cssnano
- Image Optimize
- Filename with Hash
- CDN Prefiex
Development
- eslint
Debug
- Source-map
- Hot-Replacement
- Live-Realod
生产环境编译后的文件有以下特点：
- 文件名追加Hash值，以便资源更新。如[name]-[chunkhash:10].js。
- 资源的地址添加CDN地址作为前缀，CDN地址配置于
config/中。
开发环境编译后的文件有以下特点：
- 资源的地址添加本地启动 webpack-dev-server 服务的 IP，Port 作为前缀。
Bael的配置
- babel-preset-es2015
- babel-preset-stage-0
- babel-preset-react
- Plugin: transform-object-assign
Css 文件的拆分
使用webpack plugin: Extract-text-webpack-plugin，将JS中引入的样式分离到单独的CSS文件。
Autoprefiexer的配置
兼容到 browsers: ['>1%', 'last 2 versions', 'iOS 7']
| 提供的配置 | 所用的插件 |
|---|---|
| babel | babel-loader,babel-preset-es2015,babel-preset-stage-0,transform-object-assign |
| react | babel-loader,babel-preset-es2015,babel-preset-stage-0,transform-object-assign,babel-preset-react |
| vue | babel-loader,babel-preset-es2015,transform-object-assign,vue-style-loader |
| less | style-loader, css-loader, postcss-loader, less-loader,autoprefixer,Extract-text-webpack-plugin |
| css | style-loader, css-loader, postcss-loader, less-loader,autoprefixer,Extract-text-webpack-plugin |
| url('./a.png') | url-loader |
| Autoprefixer | autoprefixer |
| .jpe?g / .png / .gif / .svg | url-loader,image-weback-loader |
| .woff / .ttf / .eot / .svg | url-loader,file-loader |
| UglifyJs | UglifyJsPlugin |
| CssMinify | cssnano |
| Image Optimize | image-weback-loader |
| Filename with Hash | url-loader |
| CDN Prefiex | assets-webpack-plugin |
| eslint | eslint-loader |
| Source-map | devtool配置项 |
| Hot-Replacement | HotModuleReplacementPlugin |
| Live-Realod | webpack-dev-server,webpack-livereload-plugin |