北京先锋画室,cf西西辅助,芭蕉树
npm create react-app myapp
npm install react-app-rewired customize-cra --save-dev
/* package.json */ 原来的: "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" }
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 命令后,项目就可以跑起来了
接下来做一些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
}
}
}
)
]
module.exports = override(
fixbabelimports('import', { //配置按需加载
libraryname: 'antd',
librarydirectory: 'es',
style: true,
}),
addwebpackexternals({ //不做打包处理配置,如直接以cdn引入的
echarts: "window.echarts",
// highcharts:"window.highcharts"
}),
addwebpackalias({ //路径别名
'@': path.resolve(__dirname, 'src'),
}),
addlessloader({
javascriptenabled: true,
modifyvars: {
'@primary-color': '#1da57a'
}
}),
(config)=>{ //暴露webpack的配置 config ,evn
// 去掉打包生产map 文件
// config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
if(process.env.node_env==="production") config.devtool=false;
if(process.env.node_env!=="development") config.plugins = [...config.plugins,...myplugin]
//1.修改、添加loader 配置 :
// 所有的loaders规则是在config.module.rules(数组)的第二项
// 即:config.module.rules[2].oneof (如果不是,具体可以打印 一下是第几项目)
// 修改 sass 配置 ,规则 loader 在第五项(具体看配置)
const loaders = config.module.rules.find(rule => array.isarray(rule.oneof)).oneof;
loaders[5].use.push({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, 'src/asset/base.scss')//全局引入公共的scss 文件
}
})
return config
}
);
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论