Introduction

技术栈：

• webpack
• antd
• redux
• React
• React-Router-Dom
• fetch(whatwg-fetch)

特性：

• 可使用动态import或bundle-loader(require.ensure)进行页面异步加载
• 使用react-hot-loader实现热加载
• 请求模块封装fetch，并支持添加请求前后的回调事件。

babel配置

"presets": [
    ["env", {
        "modules": false
    }],
    "react",
],
"env": {
    "development": {
        "plugins": ["react-hot-loader/babel"]
    }
},
"plugins": [
    "transform-decorators",
    "transform-object-rest-spread",
    "syntax-dynamic-import",
    "transform-class-properties",
    ["transform-runtime", {
        "helpers": false,
        "polyfill": false,
        "regenerator": true,
        "moduleName": "babel-runtime"
    }]
]

图省事可以直接babel-preset-stage-0搞定

webpack splitChunks配置

在默认配置上做了部分改动：对于同步加载的非node_modules模块(size>30k)，当有两个入口文件使用到该模块的时候，会抽出common包。

chunks: "async",
minSize:30000,
minChunks:1,
maxAsyncRequests:5,
automaticNameDelimiter:'~',
maxInitialRequests:3,
name:true,
cacheGroups: {
    default: {
        chunks:'all',
        minChunks:2,
        priority: -20,
        reuseExistingChunk: true
    },
    vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
    }
}

Usage

development:

npm install

npm start

production:

npm run build