基于React脚手架搭建React + dva + webpack + less
Mac
- react-create-app 创立react我的项目及typescript，react-create-app须要本人装置配置，不赘述
npx create-react-app [app0729-自定义文件名] --typescript
执行yarn start能够看到默认页面了~ - 裸露webpack，即生成webpack配置等文件, config/script
yarn eject - 装置dva
yarn add dva 配置路由
yarn add history- src下创立routes文件夹，该文件夹内放各个页面，每个页面独自创立文件夹
举个栗子~
// home.tsximport { Link } from 'dva/router';import React from 'react';const Home = ({history}: any): JSX.Element => { return ( <div className="home-wrapper"> <h1>home</h1> <p onClick={() => { // history跳转 history.push('/orderList'); } }>去订单列表页</p> // link标签跳转 <Link to={'/orderList'}>去订单列表页</Link> </div> )}export default React.memo(Home);- 批改src/app.tsx文件 -- 管制路由
- src下创立routes文件夹，该文件夹内放各个页面，每个页面独自创立文件夹
import React from 'react'; import { Router, Route, Switch } from 'dva/router';import dynamic from 'dva/dynamic';const routes = [ { key:'home', path: '/', component: () => import('./routes/Home/home'), }, { key:'/orderList', path: '/orderList', component: () => import('./routes/Order/orderList/index'), }, { key:'/orderDetail', path: '/orderDetail', component: () => import('./routes/Order/orderDetail/index'), }];function RouterConfig({ history, app }: any) { return ( <Router history={history}> <Switch> { routes.map((item: any): any => ( <Route key={item.key} path={item.path} exact // @ts-ignore component={dynamic({ // @ts-ignore app, models: item.models, component: item.component, })} /> )) } </Switch> </Router> ); } export default RouterConfig; - 批改src/index.tsx文件 入口文件
import dva from 'dva'; // import './index.css'; import { createBrowserHistory } from 'history'; // 1. Initialize const app = dva({ history:createBrowserHistory()}); // 2. Plugins -- 能够挂载loading等插件// app.use({}); // 3. Model -- 引入全局model 可稍后尝试// app.model(require('./models/app').default); // 4. Router app.router(require('./App.tsx').default); // 5. Start -- 挂载到 #root DOM上app.start('#root'); 执行yarn start曾经能够看到页面内容了，能够点击跳转页面~
装置less，react脚手架自带的是sass，如果想应用sass可间接装置
- 执行
yarn add --dev less less-loader,
如果提醒node版本号谬误如
less-loader@10.0.1: The engine "node" is incompatible with this module. Expected version ">= 12.13.0". Got "10.18.0",可执行yarn add --dev less less-loader --ignore-engines,疏忽node版本号即可。- webpack配置less
-config/webpack.config.js批改 lessRegex、lessModuleRegex替换sassRegex、sassModuleRegex
- 执行
const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/// const sassRegex = /\.(scss|sass)$/;// const sassModuleRegex = /\.module\.(scss|sass)$/; // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass { test: lessRegex, // 替换 exclude: lessModuleRegex, // 替换 use: getStyleLoaders( { importLoaders: 1, // 替换 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'less-loader' // 替换 ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: lessModuleRegex, // 替换 use: getStyleLoaders( { importLoaders: 1, // 替换 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' // 替换 ), },src/routes/Home下创立style.less并在home.tsx文件内引入import './style.less';, 重启服务。
如果呈现以下问题，阐明装置的less-loader版本过高，不反对getOptions办法，装置低版本即可，执行yarn add --dev less-loader@7.0.0即可（能够本人尝试哪个版本号可用）
再执行yarn start就能够启动服务了，此时less已可应用了
如果呈现less生成的款式的class名字都是hash命名，阐明上述配置中的 getStyleLoaders-modules有问题，依照配置更改即可~