Create React App 的Webpack4配置高级进阶
React 框架搭建
Creact React App(CRA)是创建React应用的一个构建脚本，并不处理后端逻辑及数据库，它与其他构建脚本不同的一点就是，它使用了 Babel 和 Webpack 这样的构建工具，使开发者不用单独去配置这些工具，从而降低了开发人员的学习难度。
但对于一些高阶的开发人员，想要对Webpack做一些修改，包括对less、跨域访问的支持以及antd的配置等，下面就是我的具体做法。
注意当前webpack的版本"webpack": "4.19.1",时基于此给出的解决方案，webpack至少是4以上版本。
按照React 官网创建你的React项目，这里就不在讲解。
使用CRA创建好项目之后，打开package.json文件：
{
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
执行yarn eject将封装到CRA中的全部配置反编译到当前项目，由此webpack的配置全部暴露给了开发者。
// eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置
config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js
// eject 后项目根目录下会出现 scripts 文件夹，里面就包含了 项目启动文件
├── build.js //生产环境
├── start.js // 开发环境
├── test.js // 测试环境
CRA和其他构建脚本不同的是，它可以通过升级react-scripts来升级CRA特性，但是如果使用eject命令后，就无法使用了，因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。
Webpack配置
这时，一个简单的项目已经可以运行成功了并且webpack配置暴露了出来，下面安装antd，配置antd
1. antd
yarn add antd安装后，你可以使用antd的组件，官网提供了两种配置方案，我们这里只介绍eject配置。
- 配置less，antd 的样式使用了 Less 作为开发语言，安装
yarn add less及yarn add less-loader - 按需加载，
yarn babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件 - 自定义主题
打开webpack.config.dev.js，作出相应的修改：
...
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//--------------------注意：这里需要增加less的相关配置--------------------
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// common function to get style loaders
const getStyleLoaders = (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));
}
}
return loaders;
};
// 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 cache
cacheCompression: 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