一、配置less
yarn add less less-loader
// webpack.config.js 新版已配置SaaS
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
},
'less-loader'
),
sideEffects: true
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
'less-loader'
)
},
二、安装antd，同时修改默认主题
yarn add antd babel-plugin-import
引用antd
import {Button} from 'antd'
在package.json中修改，也可以在webpack.config.js中更改，不过需要修改dev和prod两个环境。
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}
修改默认主题
// 首先 babel插件中 style改成true
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true // // `style: true` 会加载 less 文件
}
]
]
}
// 然后在webpack中修改getStyleLoaders方法，新版less loader抽成公共函数了
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined)
},
{
loader: require.resolve('css-loader'),
options: cssOptions
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
}
}
].filter(Boolean);
// 修改这里
if (preProcessor) {
// loaders.push({
// loader: require.resolve(preProcessor),
// options: {
// sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
// }
// });
let loader = require.resolve(preProcessor);
if (preProcessor === 'less-loader') {
loader = {
loader,
options: {
modifyVars: {
'primary-color': 'red'
},
javascriptEnabled: true
}
};
}
loaders.push(loader);
}
return loaders;
};
没有生效？ antd官网提示
注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
-
如果你在使用 babel-plugin-import 的
style配置来引入样式，需要将配置值从'css'改为true，这样会引入 less 文件。 -
如果你是通过
'antd/dist/antd.css'引入样式的，改为antd/dist/antd.less。
三、react -hot-loader
修改的部分自动刷新，和自动刷新网页不同的是，hot-loader并不会刷新网页，仅仅是替换修改的部分。
配置react-hot-loader
yarn add react-hot-loader -s
修改webpack.config.js
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo![path]'
}
}
},
"react-hot-loader/babel" // plugin中加上react-hot-loader
]
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction
}
},
在App.js中配置使用
import { hot } from 'react-hot-loader';
export default hot(module)(App);
重启后可以看到修改部分已经刷新而浏览器网页没有刷新。
四、配置redux
- 因为react-router-redux仓库不在维护，推荐使用connected-react-router
connected-react-router仓库- 为什么使用redux-saga代替redux-thunk?
原因及配置、redux-saga仓库
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './reducers';
import { Provider } from 'react-redux';
import { LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { AppContainer } from 'react-hot-loader';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './reducers/saga';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
export const history = createBrowserHistory(); // 路由
let sagaMiddleware = createSagaMiddleware(); //创建saga中间件
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
createRootReducer(history), // root reducer with router state
composeEnhancer(
applyMiddleware(
sagaMiddleware,
routerMiddleware(history) // for dispatching history actions
// ... other middlewares ...
)
)
);
sagaMiddleware.run(rootSaga);
// AppContainer（hot-loader）=》LocaleProvider （antd国际化）=》Provider （react-redux顶级组件放入store=》App 页面最高级组件负责路由）
const render = () => {
ReactDOM.render(
<AppContainer>
<LocaleProvider locale={zhCN}>
<Provider store={store}>
<App history={history} />
</Provider>
</LocaleProvider>
</AppContainer>,
document.getElementById('root')
);
};
render();
serviceWorker.unregister();
// App.js
import React from 'react';
import { hot } from 'react-hot-loader';
import { ConnectedRouter } from 'connected-react-router';
import routes from './routes';
import PropTypes from 'prop-types';
// 关联路由
const App = ({ history }) => {
return <ConnectedRouter history={history}>{routes}</ConnectedRouter>;
};
App.propTypes = {
history: PropTypes.object
};
export default hot(module)(App);
// router.js
import React from 'react';
import { Route, Switch } from 'react-router';
const Home = props => (
<div>
<h2>haha </h2>
</div>
);
const routes = (
<Switch>
<Route exact path='/' component={Home} />
</Switch>
);
export default routes;
// reducer.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
const createRootReducer = history =>
combineReducers({
router: connectRouter(history)
});
export default createRootReducer;
// saga.js
import { all } from "redux-saga/effects";
import { watchFetchCate } from "./global";
export default function* rootSaga() {
yield all([watchFetchCate()]);
}
五、配置代理
新版本cra脚手架在package.json中使用proxy只能用字符串了。官网给了新的使用方式，在src下新建文件setupProxy.js加下面代码，无需单独应用，webpack会自动引入文件。
一个大坑：因为我用typescript了，文件名结尾.ts导致文件不生效！！！切记.js文件结尾
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/house', { target: 'https://evaluatepre.jd.com' }));
app.use(proxy('/vehicle', { target: 'https://evaluatepre.jd.com' }));
app.use(
proxy("/user", {
target: "https://test.com",
changeOrigin: true
})
);
};
网友评论