React craco 详细使用与介绍（类似 Vue 外抛的 ）
const path = require('path')
const lessPlugin = require('craco-less')
module.exports = {
// 插件配置
plugins: [
{
plugin: lessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
// modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true
}
}
}
}
// ...
],
// 修改 babel 配置
babel: {
// plugins: [
// ['@babel/plugin-proposal-decorators', { legacy: true }],
// [
// 'import',
// {
// 'libraryName': 'antd',
// 'libraryDirectory': 'es',
// 'style': 'css' // 设置为 true 即是 less 这里用的是 css
// }
// ]
// ]
// ...
},
// 修改 eslint 配置
eslint: {
// ...
},
// 修改 module 配置
module: {
// rules:[// 规则，在写 的时候发现引入后缀为 .scss 会报错，在这里配置一下即可
// {
// test: /.scss$/,
// loaders: ['style-loader', 'css-loader', 'sass-loader']
// }
// ]
// ...
},
// 跨域配置
devServer: {
proxy: {
'/api': {
target: 'https://xxx:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
// ...
},
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
},
// webpack 插件
plugins: {
add: [ /* ... */],
remove: [ /* ... */],
},
// plugins: [
// new ConfigWebpackPlugin(),
// ...whenDev(() => [new CircularDependencyPlugin()], []),
// ],
// 这里面是 webpack 原始配置，这里追加的配置，将与原始配置合并
configure: {
resolve: {
fallback: {
'path': false,
'util': false,
'url': false,
'http': false,
'https': false,
'stream': false,
'assert': false,
'querystring': false,
'zlib': false
}
}
}
// ...
}
}