react之webpack常用配置

react之webpack常用配置,第1张

create-creact-app项目,如果需要手动修改配置,需先npm run ejectd出配置,这个过程是不可逆的。

如何在不通过npm run eject进行webpack配置了?

1.用craco配置来去进行webpack相关配置。
2.用react-app-rewired 和 customize-cra进行webpack配置。

第一种方式:用craco配置来去修改webpack配置
 yarn add  @craco/craco
//或者
 npm install  @craco/craco --save

修改package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
}

在项目根目录新建craco.config.js文件

1.打包build生成gizp压缩文件

npm install compression-webpack-plugin --save

在craco.config.js里添加

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const webpack = require('webpack')
module.exports = {
    webpack: {
     

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1323169.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存