优化（学习）公司的webpack配置(二)

优化（学习）公司的webpack配置(二)

上周开始优化（学习）公司的webpack配置(一) https://blog.csdn.net/XiaoYige_97/article/details/123737624 ，想看从零开始配置webpak会遇到什么坑，可以去上一篇博客了解。现在我们故事还没有完，那是一个美丽的周末。。。我打开了公司的项目，继续学习配置webpack,遇到了很多精彩的故事（事故）。

---

提高打包速度

原理：webpack 的打包原来是会把入口文件，已经入口文件引入的文件(模块)打包为一个bundle.js 文件。

一般项目都已经是封装好了一个router 文件，如果使用状态管理的还有一个store 文件，比如router文件导入了几十个组件的话，那么webpack 就会把这些文件都打包，store文件同理。

我们在尝试玩webpack或者是在开发一个功能的是时候，可以把一些不必要的文件导入给先注释掉

router/index.js

import Home from 'page/component/Home'
import A from 'page/component/A'
import B from 'page/component/B'
import C from 'page/component/C'

那么在配置webpack，我们可以注释掉 A B C组件(不必要组件)，那么webpck 只打包Homez组件(必要组件)。这样就不必在修改一下webpack配置，重启webpack的时候打包整个项目，整个操作，项目越大，效果越明显。

配置扩展名

component/index.js 文件中

import Query from './Query';
import FormPopup from './FormPopup';
import BoxPopup from './BoxPopup'; // 没有写文件扩展名

报错
Module not found: Error: Can't resolve './BoxPopup'

报错原因

导入 BoxPopup没有加后扩展名

解决方法：

在resolve里面和alias同级加 extensions: [’.js’, ‘.jsx’, ‘.less’], //后缀名自动补全

总结:这个问题解决得还是比较顺利的，

1. 思路：觉得有一些路径没有配好，但是没有看到有相关的配置
2. 思路：发现同样的文件结构，.js 组件没有问题，.jsx 没有组件就有问题，觉得可能是处理jsx的babel配置搞好，但是也没有发现问题
3. 思路：原来是扩展名的问题

CSS 模块化

这里的故事很就很精彩,浏览器报错信息如下，可以分析出在 LayoutView组件的render函数里面，找不到layout属性，

react-hot-loader.development.js:297
TypeError: Cannot read properties of undefined (reading ‘layout’)
at LayoutView.render (LayoutView.js:104:40)

1. 思路：在文件中LayoutView.js中发现，有下面两行代码，觉得可能是，antd 的问题，经过三十多分钟认真排查，使用二分删除代码算法，终于排除出：不是代码的问题。

   import { Layout, Menu, Icon } from "antd";
   const { Header, Footer, Content } = Layout;
   

2. 思路：在render方法里面有一个这样的代码,

   import styles from "./LayoutLess.less";
   
   <div className={styles.layout}>
       
   // 打印验证 styles
   console.log('LayoutView--styles',styles); // LayoutView--styles undefined
   

   发现了问题，原因是import styles from "./LayoutLess.less"; 导入模块化less 文件的时候，没有导入。

3. 思路: 开始从 less-loader 到css-loaderd的配置文件，在css-loader中发现了 css-loader中有一个modules选项。

   type modules =
     | boolean
     | "local"
     | "global"
     | "pure"
     | "icss"
     | {
         localIdentName: string;
         localIdentContext: string;
         localIdentHashSalt: string;
         localIdentHashFunction: string;
         localIdentHashDigest: string;
         localIdentRegExp: string | regExp;
         namedExport: boolean;
         exportGlobals: boolean;
   };
   

   并且公司配置的webpack中发现了css-loader 有以下参数

   modules: {
      localIdentName: "[local]",
   },
   

   如果世界像我想的那么简单就好了，找到了css-loader中的modules 文件，也看到了公司的有类似的配置，以为成功将要易如反掌。等我反复尝试，等我反复尝试，等我反复尝试，等我反复尝试.从2022.03.26（周六）的下午6点到 2022.03.26（周日）晚上八点。从找资料，到百度，到微信问大佬，到在三个前端群里撒网请教…

   解决方法

   // 第一步，在css-loader 的option 加一面配置

   modules: {
   localIdentName: “[local]”,
   },

   // 第二步

   删掉style-loader ,没错删掉它，即使我不明白为什么，但是删掉就可以了，公司的也没有用style-loader,我从接触webpack开始，就认为不管是less ,css，都要用style-loader,你现在告诉我不用了？ 啊？你对得起我吗？

   结果：成功打印，样式生效

   // 打印验证 styles
   console.log('LayoutView--styles',styles); 
   // 是一个key-value的对象
   LayoutView--styles {layout: 'layout', layouMain: 'layouMain', content: 'content'}
   

总结以及感言:

​ 花了10几个小时搞这个问题，我找了很多的文章，搞到3 4点，第二天还搞起来搞这个问题，真的佩服我自己，居然这种惊人的傻劲，期间心态当然不可能有多么的美丽了，但是在解决这个问题的时候，一股难以言语的感情充斥全身愉悦，那是一种心里突然放下了一块石头的感觉，是醍醐灌顶顿悟，是柳暗花明眼前一亮。这愉悦是快乐的但也是不纯粹的，为什么要那么久才行定位问题，你个大聪明！

​ 不管怎么说，虽然花了大量的时间，但是收获，没有收获，网上的没有找到像我这样的傻问题。不过对css-loaler了解程度加了一点点吧。

​ 最后，感谢同事，感谢前同事，感谢3个群里陌生人热情提供建议和方向，区区10几个小时，我已经抑郁了，感谢那些为攻克一个难题花几十年的科学家，感谢导弹之父，感谢水稻之父。。。

读取静态资源错误

index.html

 <link rel="stylesheet" href="<%=htmlWebpackPlugin.options.publicPath%>assets/css/antd.min.css"/>
  
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1591150_b3wnhixk4jq.css"/>

<script type="text/javascript" src="<%=htmlWebpackPlugin.options.publishPath%>privateConfig.js"></script>

<script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>assets/js/browser-polyfill.js"></script>

报错是因为打包好的入口文件index.html的时候，没有把静态资源打包复制到打包好的目录

解决方法：

npm install copy-webpack-plugin --save-dev

此插件会把指定的文件，复制到指定的目录

new HtmlWebpackPlugin({
    template: './src/index.html',
    publicPath:"/"
}),
new CopyWebpackPlugin({
    patterns: [
        {
            from:  path.resolve(__dirname,"src/assets"),
            to: path.resolve(__dirname, 'dist/assets')
        },
    ],
}),

成功启动了

到了这里迈出了一大步，下一步应该是根据webpack 打包分析，调整webpack配置一下，优化打包配置。

周一结