react 使用rewired_使用react-app-rewired和customize-cra对默认webpack自定义配置

javascript

技术文章

开发

使用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*/原来的："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

}

}

}

)

]

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

}

);

内容来源于网络，如有侵权请联系客服删除