yarn add antd babel-plugin-import
根目錄下新建.roadhogrc
文件(別忘了前面的點,這是roadhog工具的配置文件,下面的代碼用於加載上一個命令安裝的import插件),寫入:javascript
{ "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }] ] }
修改 webpack.config.dev.js 和 webpack.config.prod.js文件,這裏以webpack.config.dev.js舉例,css
webpack.config.prod.js同樣配置便可:html
// Process JS with Babel. { test: /\.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { // 改動: 添加 antd 按需加載文件處理插件 plugins: [ ['react-html-attrs'],//添加babel-plugin-react-html-attrs組件的插件配置 // 引入樣式爲 css ['import', { libraryName: 'antd', style: 'css' }], // 改動: 引入樣式爲 less // ['import', { libraryName: 'antd', style: true }], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, }, },
引入模塊以下:java
// scr/App.js import React, { Component } from 'react'; - import Button from 'antd/lib/button'; + import { Button } from 'antd'; import './App.css';
1. 安裝react-app-rewirednode
npm install –save-dev react-app-rewired
2.修改package.json啓動項react
/* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", }
3.在項目根目錄建立一個 config-overrides.js 用於修改默認配置。webpack
module.exports = function override(config, env) { // do stuff with the webpack config... return config; };
4.使用babel-plugin-import實現Antd按需加載,修改config-overrides.jsweb
npm install –save-dev babel-plugin-import
config-overrides.jsnpm
/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config); return config; };
5.使用react-app-rewire-less配置Lessjson
npm install –save-dev react-app-rewire-less
config-overrides.js
/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); const rewireLess = require('react-app-rewire-less'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config); config = rewireLess.withLoaderOptions({ modifyVars: { "@primary-color": "#1DA57A" }, })(config, env); return config; };
我遇到的問題: 1. \__DEV__ is not defined.
npm install –save-dev react-app-rewire-defind-plugin
config-overrides.js
/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); const rewireLess = require('react-app-rewire-less'); const rewireDefinePlugin = require('react-app-rewire-define-plugin'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config); config = rewireLess.withLoaderOptions({ modifyVars: { "@primary-color": "#1DA57A" }, })(config, env); config = rewireDefinePlugin(config, env, { __DEV__: false }); return config; };
注:在執行 yarn build 進行打包部署後,antd樣式沒有加載進去
解決方案:生產部署增長對antd的支持
// Process JS with Babel. { test: /\.(js|jsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { // 改動: 添加 antd 按需加載文件處理插件 plugins: [ ['react-html-attrs'],//添加babel-plugin-react-html-attrs組件的插件配置 // 引入樣式爲 css ['import', { libraryName: 'antd', style: 'css' }], // 改動4: 引入樣式爲 less // ['import', { libraryName: 'antd', style: true }], ], compact: true, }, },