• webpack配置杂记

    1、热更新

    1. 安装webpack-dev-server : npm i webpack-dev-server -D

    2. webpack.config.js配置 
      1. module.exports = {
      2.     // 其他配置
      3.     ...,
      4.     
      5.     // 热更新配置
      6.     devServer: {
      7.       host: "localhost",
      8.       port: 3000,
      9.     },
      10. }

    2、入口entry：使用相对路径们也就是webpack程序运行的路径，而不是文件所在的路径

    3、配置postcss处理兼容问题（postcss配置要放到css-loader之后、其他css预处理器之前）

    4、启动缓存（Babel、eslint）

    1. // module中配置,babel-loader中启动babel缓存
    2. module:{
    3.     rules:{
    4.         test:/\.js$/,
    5.         include:path.resolve(__dirname,'../src'),
    6.         use:{
    7.             loader:"babel-loader",
    8.             options:{
    9.                 cacheDirectory:true, // 是否启动缓存
    10.                 cacheCompression:false, // 是否开启压缩
    11.             }
    12.         }
    13.     }
    14. }
    15.  
    16. // plugins中的eslint开启缓存
    17. plugins:[
    18.     new ESLintPlugin({
    19.       context: resolve("../src"),
    20.       exclude: "node_modules",
    21.       cache:true, // 开启缓存
    22.       //目录为缓存目录
    23.       cacheLocation:path.resolve(__dirname,'../node_modules/.cache/eslintcache')
    24.     }),
    25. ]

    5、减小代码体积

            为什么
    1. Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！
    2. Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。
    3. 你可以将这些辅助代码作为一个独立模块，来避免重复引入
            怎么做

            @babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

    1. module:{
    2.     rules:[
    3.         {
    4.              loader: "babel-loader",
    5.              options: {
    6.                   cacheDirectory: true,
    7.                   cacheCompression: false,
    8.                   plugins: ["@babel/plugin-transform-runtime"], // 减小代码体积
    9.              },
    10.         }
    11.     ]
    12. }

    6、为动态导入模块添加名字（动态导入文件即使引入一次，也会被单独打包成一个文件）

    1. document.getElementById("btn").onClick = function () {
    2.   // eslint会对动态导入语法报错，需要修改eslint配置文件
    3.   // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
    4.   // "math"将来就会作为[name]的值显示。
    5.   import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {
    6.     console.log(count(2, 1));
    7.   });
    8. };
    webpack.config.js中配置
    1. {
    2.     ...,
    3.     output:{
    4.         // 入口文件打包输出文件名
    5.         filename:"static/js/main.js"
    6.         // 图片、字体等通过type:asset处理的资源命名方式
    7.         assetModuleFilename: "static/images/[hash:10][ext][query]",
    8.         // 动态导入输出资源命名方式
    9.         chunkFilename:"static/js/[name].chunk.js",
    10.     },
    11.     {
    12.         test: /\.(png|jpe?g|gif)$/,
    13.         type: "asset",
    14.         // generator: {
    15.           //   filename: "static/images/[hash:10][ext][query]",
    16.         // },
    17.          parser: {
    18.            dataUrlCondition: {
    19.              maxSize: 10 * 1024,
    20.            },
    21.          }, 
    22.     },
    23.     ...,
    24.     optimization:{
    25.         splitChunks:{
    26.             chunks:"all"
    27.         }
    28.     }
    29. }

    7、根据文件内容生成hash值（contenthash）,当主文件没有改动，而引用的文件改动时，主文件hash值不改变

    1. {
    2.     ...,
    3.     output:{
    4.         filename: "static/js/[name].[contenthash:10].js",//这里的名字一定要使用[name]方式
    5.     },
    6.     ...,
    7.     optimization:{
    8.         ...,
    9.         // 提取runtime文件
    10.         runtimeChunk: {
    11.             name: (entrypoint) => `runtime~${entrypoint.name}.js`,
    12.         },
    13.     }
    14. }

    8、Core-js为语法打补丁（比如IE 10中不支持数组中的flat方法，@babel/preset-env无法解决这种api问题）

    1. // babel-config.js
    2. module.exports = {
    3.   //@babel/preset-env 是一个智能预设，允许你使用最新的 JavaScript，而无需微观管理目标环境需要哪些语法转换
    4.   presets: [
    5.     [
    6.       "@babel/preset-env",
    7.       {
    8.         useBuiltIns: "usage",
    9.         corejs: 3,
    10.       },
    11.     ],
    12.   ],
    13. };

    如果看不到输出的core-js相关语法文件，查看package.json中的browserslist配置是否设置的浏览器版本比较高

    1. // package.json
    2. {
    3.     ...,
    4.     "browserslist": [
    5.     "last 2 version",
    6.     "> 1%",
    7.     "not dead",
    8.     "IE 10"
    9.   ],
    10. }

    9、webpack中plugins的ESLint配置

    1. plugins:{
    2.     new EsLintWebpackPlugin({
    3.       context: resolve("./src"),
    4.       exclude: "node_modules",
    5.       cache: true,
    6.       cacheLocation: resolve("./node_modules/.cache/.eslintcache"),
    7.     }),
    8. }

    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

    是context不是content

    10、react中配置babel.config.js配置react自动引入

    1. module.exports = {
    2.   presets: [
    3.     [
    4.       "react-app",
    5.       {
    6.         runtime: "automatic",
    7.       },
    8.     ],
    9.   ],
    10. };

    11、分包cacheGroups

    1. {
    2.     ...,
    3.     optimization:{
    4.         splitChunks: {
    5.         chunks: "all",
    6.         cacheGroups:{
    7.          react:{
    8.             test:/[\\/]node_modules[\\/]react(.*)?[\\/]/,
    9.             name:'chunk-react',
    10.             priority:40
    11.           },
    12.           antd:{
    13.             test:/[\\/]node_modules[\\/]antd[\\/]/,
    14.             name:"chunk-antd",
    15.             priority:30
    16.           },
    17.           lib:{
    18.             test:/[\\/]node_modules[\\/]/,
    19.             name:"chunk-libs",
    20.             priority:20
    21.           }
    22.         }
    23.       },
    24.     }
    25.  
    26. }

  • 相关阅读:
    6.3 创建窗口
    linux批量解压zip
    redis探索之缓存一致性
    现货黄金代理好吗？
    基于51单片机的多机交互串口通信Proteus仿真
    【Python】PySpark 数据计算 ④ ( RDD#filter 方法 - 过滤 RDD 中的元素 | RDD#distinct 方法 - 对 RDD 中的元素去重 )
    解密Socks5代理和代理IP：网络工程师的隐秘武器
    数字孪生推动军营智慧化管理，军事化应用战场空间可视化解决方案
    win10 linux 子系统 wsl2实现ip自动转发
    初试占比70%，计算机招生近200人，安徽理工大学考情分析
  • 原文地址：https://blog.csdn.net/weixin_54607676/article/details/136222079