使⽤react-app-rewired和customize-cra对默认webpack⾃定义配
置
最近在学习react框架，之前⼀直都是⽤vue 开发，知道在vue 中知道如何配置⼀下相关的webpack 有助于开发，学react 过程中，我也在想这些该怎么配置啊，所以就有这篇⽂章。
这篇⽂章主要是讲 react-create-app ⽣成的项⽬利⽤ react-app-rewired 和 customize-cra 的配置
1. ⾸先我们创建⼀个项⽬ myapp ，执⾏命令
npm create react-app myapp
2. 然后安装 react-app-rewired 和 customize-cra
npm install react-app-rewired customize-cra  --save-dev
3. 改写package.json 的启动命令
/* package.json */
react开发框架
原来的：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
修改后的：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
4. 修改后直接执⾏npm start 启动项⽬，你会发现报错，没关系，报错就解决，你会发现报错信息中有：The “injectBabelPlugin” helper has been deprecated as of v2.0
翻译：
⾃2.0版起，“injectbabelplugin”助⼿已被弃⽤
react-app-rewired的新版本删除了injectBabelPlugin，这些⽅法被移动到⼀个名为’customize-cra’的新包中
解决⽅案就是降低版本，执⾏两个命令：
npm uninstall react-app-rewired  //删原来的
npm install react-app-rewired@2.0.2 --save-dev  //安装指定底版本的
执⾏ npm start 命令后，项⽬就可以跑起来了
5. 项⽬的根⽬录会多⼀个配置⽂件config-overrides.js （如果没有，⼿动新建）
接下来做⼀些webpage的配置，⽐如插件配置，路径别名，ui 插件按需加载，修改、添加loader
直接上完整代码，带注释
const { override, fixBabelImports ,addWebpackExternals ,addWebpackAlias ,addLessLoader } = require('customize-cra');
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const myPlugin = [
new UglifyJsPlugin(
{
uglifyOptions: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: true
}
}
}
)
]
fixBabelImports('import', { //配置按需加载
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addWebpackExternals({ //不做打包处理配置，如直接以cdn引⼊的
echarts: "harts",
// highcharts:"window.highcharts"
}),
addWebpackAlias({ //路径别名
'@': solve(__dirname, 'src'),
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#1DA57A'
}
}),
(config)=>{ //暴露webpack的配置 config ,evn
// 去掉打包⽣产map ⽂件
// config.devtool = de === 'development' ? 'cheap-module-source-map' : false;
v.NODE_ENV==="production") config.devtool=false;
v.NODE_ENV!=="development") config.plugins = [...config.plugins,...myPlugin]    //1.修改、添加loader 配置 :
// 所有的loaders规则是在dule.rules(数组)的第⼆项
// 即：dule.rules[2].oneof  (如果不是，具体可以打印⼀下是第⼏项⽬)
// 修改 sass 配置，规则 loader 在第五项(具体看配置)
const loaders = dule.rules.find(rule => Array.Of)).oneOf;
loaders[5].use.push({
loader: 'sass-resources-loader',
options: {
resources: solve(__dirname, 'src/asset/base.scss')//全局引⼊公共的scss ⽂件
}
})
return config
}
)
;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。