《基于 Vue 组件库的 Webpack5 配置》7.路径别名 resolve.alias 和性能 performance

9月前作者：AvatarGiser 分类：Toy博客阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了《基于 Vue 组件库的 Webpack5 配置》7.路径别名 resolve.alias 和性能 performance。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

路径别名 resolve.alias

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src/"),
            "@assets": path.resolve(__dirname, "./src/assets/"),
            "@mixins": path.resolve(__dirname, "./src/mixins/"),
            "@components": path.resolve(__dirname, "./src/components/"),
            "@images": path.resolve(__dirname, "./src/assets/images/")
        },
        extensions: [".*", ".js", ".vue", ".json"]
    }
}

性能 performance文章来源地址https://www.toymoban.com/news/detail-674085.html

module.exports = {
    performance: {// 性能
        hints: 'warning', // 枚举 false 关闭性能提示
        maxEntrypointSize: 10240000000000, // 最大入口文件大小
        maxAssetSize: 10240000000000, // 最大资源文件大小
    },
}

到了这里，关于《基于 Vue 组件库的 Webpack5 配置》7.路径别名 resolve.alias 和性能 performance的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

《基于 Vue 组件库的 Webpack5 配置》6.将字体库和图片等静态资料，编译后打包至指定文件夹

参考 Rule.generator.filename package.json 的配置如下

2024年02月11日
浏览(77)
基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件

基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件，开箱即用 A Vue 3.x Table Component built on Webpack 5 该组件库可供学习、参考和用于二次开发。 1.基于 Webpack 5 构建 2.全面支持 Vue 3 3.支持 JSON 序列化表格快速配置 4.已内置 Pagination 分页 5.支持自定义 prop 列名 6.支持单元格内容自

2024年04月13日
浏览(83)
《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5

基于 Vue2.x 的项目和组件库开发于 2019 年，那时对 Webpack 版本没有概念，项目和组件库的版本混乱…有的使用 v3 ，有的使用 v4 … 对于现今 2023 年（或 2024 年）的整个生态环境是不够用的，无法使用较新和更优秀的插件。所以升级势在必行！注意本篇是基于 Vue2.x 组件库

2024年02月03日
浏览(44)
基于vue3+webpack5+qiankun实现微前端

一主应用改造（又称基座改造） 1 在主应用中安装qiankun(npm i qiankun -S) 2 在src下新建micro-app.js文件，用于存放所有子应用。 3 改造vue.config.js，允许跨域访问子应用页面 4 改造main.js 5 在App.vue中写响应跳转子应用（根据自己的项目找对应位置写，不局限于App.vue）需要注

2024年02月13日
浏览(62)
使用webpack5+TypeScript+npm发布组件库

作为一只前端攻城狮，没有一个属于自己的组件库，那岂不是狮子没有了牙齿，士兵没有了武器，姑娘没有了大宝SOD蜜，你没有了我.... 言归正传，下面将给大家介绍如何通过webpack5编译一个TS组件发布到NPM平台。 1、通过webpack5初始化一个typescript环

2024年04月16日
浏览(40)
在vite+vue3项目中配置使用css预处理器（less/sass）以及路径别名

vite已经将这些预处理器的loader内置了，我们不用再像在webpack项目中那样，需要下载和配置一堆相关的loader，我们只需要下载less，sass依赖，就能直接在项目中使用啦使用npm或者yarn来安装以下依赖： Less预处理器： npm install -D less Sass预处理器： npm install -D sass 如图，下载之后

2024年02月11日
浏览(105)
webpack5高级配置

注意：webpack5基本配置只是打包产出一个html文件，想要产出多个html就需要进行过入口的配置 webpack.common.js 注意：公共文件中的入口需要引入两个js文件 webpack.prod.js 注意：输出的时候利用[name]根据输入的文件名来确定导出的文件名称！ webpack.common.js 注意：针对多个html文件

2024年02月15日
浏览(54)
Webpack5 搭建Vue项目（进阶版）

提示：中间隔了好长时间，我胡汉三又回来继续更新了！！！😂😂😂 提示：文章涉及的一些内容仅供参考：大多数情况下，大家在项目开发的过程中，基本很少去说让开发人员去自助的搭建一个Vue项目。基本都是使用现成的一些模版项目，直接在上面进行一个二次的开发

2024年02月09日
浏览(38)
Webpack5新手入门简单配置

yarn init -y yarn add -D webpack@5.75.0 webpack-cli@5.0.0 说明：写入下面的一句话说明：如果没有安装webpack脚手架就不能执行yarn webpack（webpack-cli） yarn webpack 说明：为yarn webpack起别名 yarn build 说明：注释写在了代码里面了

2024年02月14日
浏览(57)
webpack5搭建react框架-生产环境配置

一、前言在项目构建时不同的环境下会有不同配置，在前面文章中已经使用webpack5配置好了基础环境和开发环境，但是在生产环境时有些配置和开发环境是不需要的，有些是可以在优化的，所以下面继续生产环境的配置。二、生产环境配置 1、添加生产环境基础配置首先我们

2023年04月13日
浏览(32)