react + webpack5 遇到的問題總結

最新推荐文章于 2023-06-21 13:55:33 发布

夢行者

最新推荐文章于 2023-06-21 13:55:33 发布

阅读量398

点赞数

分类专栏： react見聞文章标签：前端 webpack

本文链接：https://blog.csdn.net/weixin_46848830/article/details/128628114

版权

react見聞专栏收录该内容

9 篇文章 0 订阅

订阅专栏

提前聲明：主要想學習一下webpack,研究了很久遇到很多問題，頭疼很久。總結了一下遇到的問題，但是我現在還是停留在能用的階段，往深裏面的原理什麽的只是并沒有研究。

  主要目標：引入CDN資源，代碼拆分，打包文件整理分文件夾打包，因爲項目小并沒有區分開發、生產、測試環境

  遇到的問題：
 1. webpack 解析json文件時報錯：Unexpected token, expected “;” [webpack打包json文件报错Unexpected token, expected “；
 
 解決：正則表達式不規範
 
 ("https://blog.csdn.net/qq_45327886/article/details/109312567")
 
 
 2.不能解析<></>  
 解決：只是更換了babel解析和.babelrc文件的配置,所以那個問題可能是之前的這些配置不對,但是我也不確定究竟是不是這個原因有些摸不到頭腦)
  
 3.不能解析App.less文件 

   解決：這個主要是因爲我最初始按照antd 4.x 官網配置craco 啓動項目引入的時候建了空文件專門引入 @import '~antd/dist/antd.less'; 
   
   這段導致loader不能解析，後來改成webpack按需引入antd 同時在atnd裏面修改antd主題配置。

 4.webpack按需引入antd同時修改antd主題配置
   
   解決： webpack按需引入需要在.babelrc文件中配置   

   "plugins":[[
    "import",{
        "libraryName":"antd", 
        "style":true
     }]
    ]  
复制代码

webpack.config.js修改antd主題配置

    { 
            test:/\.less$/,   
                use:[{
              loader: 'style-loader',
            }, {
              loader: 'css-loader', 
            }, {
              loader: 'less-loader', 
             options: {
               lessOptions: {  
                 modifyVars: {
                   'primary-color': '#489C9C',
                   'link-color': '#489C9C',
                   'border-radius-base': '2px',
                 },
                 javascriptEnabled: true,
               },
             },
            }],  
          },  

5.svg圖片不識別沒有正常加載到打包的項目上去
解決：後來查到Webpack5已经废弃了url-loader、file-loader，raw-loader使用后资源无法正常加载，图片无法正常显示,我改用asset module type但是使用之後svg還是沒有成功顯示。
所以改 成在file-loader插件加 `type: 'javascript/auto' `就可以了。

6.webpack 引入正式環境不識別 我區分的項目生產開發環境 process.env.REACT_APP_ENV ：

解決:用corss-env dotenv dotenv-webpack 

const Dotenv = require('dotenv-webpack')
new Dotenv({ 
      path: path.resolve(__dirname, `process.env.${process.env.NODE_ENV}`) 
}),
運行命令：
 "scripts": {
     cross-env NODE_ENV=production dotenv -e webpack-dev-server
 }
7.代碼分割 ：好處对应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量，解决打包的副作用——单文件过大，导致加载时间过长。
    splitChunks: {
  // chunks 可以设置的值有三个
  // 1. async 对异步(async)引入的包进行分包操作 默认值
  // 2. inital 对同步引入的包进行分包操作
  // 3. all 对所有引入的包全部进行分包操作
  chunks: 'all',
  // 默认情况下，所有被抽取出去的包都会合并到[id].bundle.js中
     // 默认值是20000Byte，表示大于这个大小的引入文件都需要抽离出来
     minSize: 20000,
     // 表示的是大于多少字节的包需要进行二次拆分，拆分为不小于minSize的包
     // 多数情况下，如果设置maxSize的值的时候，minSize和maxSize的值一般是一致的
     maxSize: 20000,
     // 某一个包引入了多少次就需要被抽离出来
     minChunks: 1, 

    // cacheGroups的含义是 所有的模块输出，会存放在缓存中，最后一起执行对应的操作
    // 在这个属性里面可以自己自定义的代码分割配置
    // cacheGroups的优先级小于minSize和maxSize，所以当两种冲突的时候，cacheGroup中的配置会默认失效
    cacheGroups: {
      // key可以任意取，在这边只是一个占位符
      // value是一个配置对象
      vendor: {
        // 正则，用以匹配对应的模块路径
        test: /[\\/]node_modules[\\/]/,
        // 输出文件名 输出文件会以 输出文件名-hash值.js的形式输出
        // name: "vender",
        
        // filename 输出文件名，和name不同的是，filename中可以使用placeholder
        filename: 'js/vendor/vendor_[id].js',
        // 优先级 在这个配置中约定俗称，一般设置为负数
        priority: -10
      },
      default: {
        minChunks: 2,
        filename: "js/common/common_[id].js",
        priority: -20
      } 
}

},
8.項目打包后不能用本機靜態服務器啓動,最初一直是manifest.json文件加載404,要麽就是出現文件訪問跨域這個困擾我很久
解決：後來發現是mode的模式沒有明確填的是none 所以不知道該用什麽環境去訪問所以會出現啓動會是空白的現象,主要原因應該還是我項目分了生產環境和開發環境,打包的時候還需要進行區分,因爲我之前沒有區分所以才會出現不識別.
9.測試的時候build包,每次都需要手動很麻煩
    解決：
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    plugins: [
        new CleanWebpackPlugin(), 
        ]
 10.引入CDN資源
     <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> 
     <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>  
     ...
       externals : {
        'react': 'React', 
        'react-dom': 'ReactDOM', 
        ...
      }
  11.取消警告：有些警告并不影響，但是用webpack-dev-server運行它會直接warn界面影響感官
  解決：
    performance: {
    hints: "warning", // 枚举
    hints: "error", // 性能提示中抛出错误
    hints: false, // 关闭性能提示
    maxAssetSize: 200000, // 整数类型（以字节为单位）
    maxEntrypointSize: 400000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) { 
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

作者：夢行者
链接：https://juejin.cn/post/7186868038082396217
来源：稀土掘金