You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
...
// style files regexesconstcssRegex=/\.css$/;constcssModuleRegex=/\.module\.css$/;constsassRegex=/\.(scss|sass)$/;constsassModuleRegex=/\.module\.(scss|sass)$/;//--------------------注意:这里需要增加less的相关配置--------------------constlessRegex=/\.less$/;constlessModuleRegex=/\.module\.less$/;// common function to get style loadersconstgetStyleLoaders=(cssOptions,preProcessor)=>{
...
// --------------------注意,在此处修改了判断语句的代码,增加对less的支持--------------------if(preProcessor){if(preProcessor==='less-loader'){loaders.push({loader:require.resolve(preProcessor),options: {modules: false,modifyVars: {"@primary-color": "#1890ff"// 这里配置antd的自定义主题色},javascriptEnabled: true}})}else{loaders.push(require.resolve(preProcessor));}}returnloaders;};// This is the development configuration.// It is focused on developer experience and fast rebuilds.// The production configuration is different and lives in a separate file.module.exports={
...
module: {strictExportPresence: true,rules: [
...
{// "oneOf" will traverse all following loaders until one will// match the requirements. When no loader matches it will fall// back to the "file" loader at the end of the loader list.oneOf: [
...
// Process application JS with Babel.// The preset includes JSX, Flow, and some ESnext features.{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?-prettier,-svgo![path]',},},},],// --------------------注意此处增加:实现按需加载--------------------: ['import',{libraryName: 'antd',style: true}],// import less],// 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,// Don't waste time on Gzipping the cachecacheCompression: false,},},
...
// --------------------注意此处在cssRegex配置之上增加--------------------// "postcss" loader applies autoprefixer to our CSS.// "css" loader resolves paths in CSS and adds assets as dependencies.// "style" loader turns CSS into JS modules that inject <style> tags.// In production, we use a plugin to extract that CSS to a file, but// in development "style" loader enables hot editing of CSS.// By default we support CSS Modules with the extension .module.css{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,},'less-loader'),},// Adds support for CSS Modules (https://github.com/css-modules/css-modules)// using the extension .module.css{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,modules: true,getLocalIdent: getCSSModuleLocalIdent,},'less-loader'),},// "postcss" loader applies autoprefixer to our CSS.// "css" loader resolves paths in CSS and adds assets as dependencies.// "style" loader turns CSS into JS modules that inject <style> tags.// In production, we use a plugin to extract that CSS to a file, but// in development "style" loader enables hot editing of CSS.// By default we support CSS Modules with the extension .module.css{test: cssRegex,exclude: cssModuleRegex,use: getStyleLoaders({importLoaders: 1,}),},// Adds support for CSS Modules (https://github.com/css-modules/css-modules)// using the extension .module.css{test: cssModuleRegex,use: getStyleLoaders({importLoaders: 1,modules: true,getLocalIdent: getCSSModuleLocalIdent,}),},
...
],},
...
// ** STOP ** Are you adding a new loader?// Make sure to add the new loader(s) before the "file" loader.],},
...
};
同样,对webpack.config.prod.js做相同的调整。
至此,antd配置结束。
2. 跨域-- webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。
在eject之后暴露出来的scripts/start.js, 找到
...
constpaths=require('../config/paths');
...
// We require that you explictly set browsers and do not fall back to// browserslist defaults.const{ checkBrowsers }=require('react-dev-utils/browsersHelper');checkBrowsers(paths.appPath,isInteractive).then(()=>{// We attempt to use the default port but if it is busy, we offer the user to// run on a different port. `choosePort()` Promise resolves to the next free port.// 获取端口号returnchoosePort(HOST,DEFAULT_PORT);}).then(port=>{if(port==null){// We have not found a port.return;}// 获取协议类型constprotocol=process.env.HTTPS==='true' ? 'https' : 'http';// 获取名称constappName=require(paths.appPackageJson).name;// 获取urlconsturls=prepareUrls(protocol,HOST,port);// 根据惯用的信息创建一个webpack编译器constcompiler=createCompiler(webpack,config,appName,urls,useYarn);// **加载代理**-----------constproxySetting=require(paths.appPackageJson).proxy;constproxyConfig=prepareProxy(proxySetting,paths.appPublic);// 创建WebpackDevServer服务器constserverConfig=createDevServerConfig(proxyConfig,urls.lanUrlForConfig);constdevServer=newWebpackDevServer(compiler,serverConfig);// 启动WebpackDevServer服务器devServer.listen(port,HOST,err=>{if(err){returnconsole.log(err);}if(isInteractive){clearConsole();}console.log(chalk.cyan('Starting the development server...\n'));openBrowser(urls.localUrlForBrowser);});['SIGINT','SIGTERM'].forEach(function(sig){process.on(sig,function(){devServer.close();process.exit();});});}).catch(err=>{if(err&&err.message){console.log(err.message);}process.exit(1);});
React 框架搭建
Creact React App(CRA)是创建React应用的一个构建脚本,并不处理后端逻辑及数据库,它与其他构建脚本不同的一点就是,它使用了 Babel 和 Webpack 这样的构建工具,使开发者不用单独去配置这些工具,从而降低了开发人员的学习难度。
但对于一些高阶的开发人员,想要对Webpack做一些修改,包括对less、跨域访问的支持以及antd的配置等,下面就是我的具体做法。
注意当前webpack的版本
"webpack": "4.19.1"
,时基于此给出的解决方案,webpack至少是4以上版本。按照React 官网创建你的React项目,这里就不在讲解。
使用CRA创建好项目之后,打开package.json文件:
执行
yarn eject
将封装到CRA中的全部配置反编译到当前项目,由此webpack的配置全部暴露给了开发者。CRA和其他构建脚本不同的是,它可以通过升级
react-scripts
来升级CRA特性,但是如果使用eject
命令后,就无法使用了,因为react-scripts
已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。Webpack配置
这时,一个简单的项目已经可以运行成功了并且webpack配置暴露了出来,下面安装antd,配置antd
1. antd
yarn add antd
安装后,你可以使用antd的组件,官网提供了两种配置方案,我们这里只介绍eject配置。yarn add less
及yarn add less-loader
yarn babel-plugin-import
是一个用于按需加载组件代码和样式的 babel 插件打开webpack.config.dev.js,作出相应的修改:
同样,对webpack.config.prod.js做相同的调整。
至此,antd配置结束。
2. 跨域-- webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。
在eject之后暴露出来的scripts/start.js, 找到
注意 加载代理配置项proxySetting,它是由paths.appPackageJson加载来的,我们向上找到
const paths = require('../config/paths');
查找当前
src
文件夹并没有
setupProxy.js
文件,我们创建src/setupProxy.js
,并安装yarn add http-proxy-middleware
,设置相应的代理更多devServer的配置,详见开发中 Server(devServer),这里不在详细介绍。
至此,若后续有修改,将继续更新。
The text was updated successfully, but these errors were encountered: