.webpackrc.js

1. antd按需引入
2. proxy代理
3. HMR热更新
   1. env 针对特定环境进行配置
   2. HMR 只在开发环境下使用，所以将配置添加到 development 字段即可
   3. npm run build 时的环境变量为 production
   4. 若无效，就更新一下 babel-plugin-dva-hmr
4. cssModules
   1. 默认已经启用了 CSS Modules
   2. "disableCSSModules": true 禁用 cssModules
5. 更多 .webpackrc 的配置，参考 roadhog 配置
   1. roadhog配置 https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md
6. theme配置，参考 default.less
   1. default.less https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

.webpackrc.js

const aliasPath = require('./aliasPath.js');
const buildPath = require('./buildPath.js');
const proxy = require('./proxy.js');
export default {
  alias: aliasPath.resolve.alias,
  // npm run build 构建配置
  es5ImcompatibleVersions: true,
  extraBabelIncludes: [
    'node_modules/regl',
    'node_modules/@antv/algorithm',
    'node_modules/@antv/layout',
  ],
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ],
  // proxy 代理
  "proxy": {
    "/api": {
      "target": "http://your-api-server",
      "changeOrigin": true
    }
  },
  // 禁用 cssModule
  "disableCSSModules": false,
  lessLoaderOPtions: {
      javascriptEnabled: true,
  },
  // 自定义 theme主题；自定义的变量太多，将其单独提取到一个文件
  theme: "./src/theme.js",
  // 热更新
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"
      ]
    }
  },
  externals: {
    moment: 'moment'
    lodash: '_',
    react: 'React',
    antd: 'antd',
    'prop-types': 'PropTypes',
    'react-dom': 'ReactDOM',
    'react-redux': 'ReactRedux',
    'react-router': 'ReactRouter',
    'react-router-dom': 'ReactRouterDOM',
    'redux-router-redux': 'ReactRouterRedux',
    redux: 'Redux',
    'redux-saga': 'ReduxSaga',  
  }
}

theme.js

export default {
  "primary-color": "#000",
}

webpackrc文档

Roadhog webpackrc.js配置
https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md

• entry
• theme
• define
• externals
• alias
• extraResolveExtensions
• browserslist
• publicPath
• outputPath
• devtool
• commons
• hash
• html
• disableCSSModules
• disableCSSSourceMap
• extraBabelPresets
• extraBabelPlugins
• extraBabelIncludes
• copy
• proxy
• sass
• manifest
• ignoreMomentLocale
• disableDynamicImport
• env

css modules

dva默认开启 css modules

disableCSSModules: false, // true：关闭 cssModules

组件使用 css modules

import styles from './style.less'
<List classNames={styles.list} />

dva启用 css modules后使用全局样式，要放在 :global下面

:global {
  .mb16 { margin-bottom: 16px }
  .mb32 { margin-bottom: 32px }
  .text-center { text-align: center }
}
// 组件使用全局样式
<List classNames="text-center" />

:global(.classname)
style.less

:global(.title) {
    margin: 0 15px;
}

roadhog配置

dva初始化没有 .roadhogrc，因为 roadhog@2，用 .webpackrc 作为配置文件
.webpackrc.js

{
  "extraBabelPlugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }]
  ],// 因为要使用mock，所以需要将这一坨注释
  "proxy": {
    "/api": {
      "target": "http://localhost:7001/",  // 请求数据接口的地址
      "changeOrigin": true
    }
  },
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"
      ]
    }
  }
}

mock

.roadhogrc.mock.js

const fs= require('fs');
const path= require('path');
const mockPath= path.join(__dirname+'/mock');
const mock={};
fs.readdirSync(mockPath).forEach(file=>{
  Object.assign(mock,require('./mock/'+file));
});
module.exports=mock