- 一、前言webpack.prod.conf.js 配置文件是webpack生产环境核心配置文件。由于这是一个系统的配置文件，将涉及很多模块和插件，所以这部分内容将分多个文章讲解，请关注博主其他文章。// 下面是引入nodejs的路径模块var path = require('path')// 下面是utils工具配置文件，主要用来处理css类文件的loadervar utils = req... 一、前言webpack.prod.conf.js 配置文件是webpack生产环境核心配置文件。由于这是一个系统的配置文件，将涉及很多模块和插件，所以这部分内容将分多个文章讲解，请关注博主其他文章。// 下面是引入nodejs的路径模块var path = require('path')// 下面是utils工具配置文件，主要用来处理css类文件的loadervar utils = req...
- 一、前言webpack.dev.conf.js 配置文件是vue开发环境wepack相关配置文件。// 引入当前目录中的utils工具配置文件var utils = require('./utils')// 引入webpack来使用webpack内置插件var webpack = require('webpack')// 引入config目录中的index.js配置文件var config... 一、前言webpack.dev.conf.js 配置文件是vue开发环境wepack相关配置文件。// 引入当前目录中的utils工具配置文件var utils = require('./utils')// 引入webpack来使用webpack内置插件var webpack = require('webpack')// 引入config目录中的index.js配置文件var config...
- 一、前言webpack.base.conf.js 文件是vue开发环境和生产环境wepack相关配置文件，主要用来处理各种文件的配置。// 引入nodejs路径模块var path = require('path')// 引入utils工具模块，utils主要用来处理css-loader和vue-style-loader的var utils = require('./utils')// 引... 一、前言webpack.base.conf.js 文件是vue开发环境和生产环境wepack相关配置文件，主要用来处理各种文件的配置。// 引入nodejs路径模块var path = require('path')// 引入utils工具模块，utils主要用来处理css-loader和vue-style-loader的var utils = require('./utils')// 引...
- 首先解释下base64的目的，其主要是为了减少http请求，转为base64以后小图片可以跟js同时被加载到浏览器，而不需要多次对服务器发出图片资源请求；其次，图片转成base64后，文件体积变大了大约1/3左右。文件的base64编码存储到了js文件中。vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。静态文件目录中的所有文件不会被转码，也就是/static下的所... 首先解释下base64的目的，其主要是为了减少http请求，转为base64以后小图片可以跟js同时被加载到浏览器，而不需要多次对服务器发出图片资源请求；其次，图片转成base64后，文件体积变大了大约1/3左右。文件的base64编码存储到了js文件中。vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。静态文件目录中的所有文件不会被转码，也就是/static下的所...
- 在现代前端开发中，Webpack已经成为了一个不可或缺的构建工具。它不仅能够帮助我们管理和打包项目中的各种资源，还能优化代码、处理模块依赖关系，提供开发环境和生产环境的配置等等。本文将深入探讨Webpack的配置和优化，帮助您构建现代化的前端工程。介绍Webpack： Webpack是一个模块打包工具，可以将各种类型的资源，如JavaScript、CSS、图片等，打包成优化的静态文件。它使用... 在现代前端开发中，Webpack已经成为了一个不可或缺的构建工具。它不仅能够帮助我们管理和打包项目中的各种资源，还能优化代码、处理模块依赖关系，提供开发环境和生产环境的配置等等。本文将深入探讨Webpack的配置和优化，帮助您构建现代化的前端工程。介绍Webpack： Webpack是一个模块打包工具，可以将各种类型的资源，如JavaScript、CSS、图片等，打包成优化的静态文件。它使用...
- Webpack 和 Babel 都是前端开发中非常重要的工具，Webpack 用于打包和构建应用，而 Babel 用于转换和处理 ECMAScript 代码。根据不同的应用场景，它们需要做出不同的配置调整。以下是一些常见的应用场景和相关的配置调整：应用场景1：构建 React 应用 相关配置调整：在 Webpack 中配置 babel-loader，并设置对 React 语法的支持。在 Ba... Webpack 和 Babel 都是前端开发中非常重要的工具，Webpack 用于打包和构建应用，而 Babel 用于转换和处理 ECMAScript 代码。根据不同的应用场景，它们需要做出不同的配置调整。以下是一些常见的应用场景和相关的配置调整：应用场景1：构建 React 应用 相关配置调整：在 Webpack 中配置 babel-loader，并设置对 React 语法的支持。在 Ba...
- 一、前言hash代表compilation的hash值。compilation在项目任何一个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值。chunkhash 代表chunk的hash,模块发生改变才会重新生成hash。contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-pl... 一、前言hash代表compilation的hash值。compilation在项目任何一个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值。chunkhash 代表chunk的hash,模块发生改变才会重新生成hash。contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-pl...
- 一、前言webpack.prod.conf.js 配置文件是webpack生产环境核心配置文件。由于这是一个系统的配置文件，将涉及很多模块和插件，所以这部分内容将分多个文章讲解，请关注博主其他文章。// 下面是引入nodejs的路径模块var path = require('path')// 下面是utils工具配置文件，主要用来处理css类文件的loadervar utils = req... 一、前言webpack.prod.conf.js 配置文件是webpack生产环境核心配置文件。由于这是一个系统的配置文件，将涉及很多模块和插件，所以这部分内容将分多个文章讲解，请关注博主其他文章。// 下面是引入nodejs的路径模块var path = require('path')// 下面是utils工具配置文件，主要用来处理css类文件的loadervar utils = req...
- 一、前言webpack.dev.conf.js 配置文件是vue开发环境wepack相关配置文件。// 引入当前目录中的utils工具配置文件var utils = require('./utils')// 引入webpack来使用webpack内置插件var webpack = require('webpack')// 引入config目录中的index.js配置文件var config... 一、前言webpack.dev.conf.js 配置文件是vue开发环境wepack相关配置文件。// 引入当前目录中的utils工具配置文件var utils = require('./utils')// 引入webpack来使用webpack内置插件var webpack = require('webpack')// 引入config目录中的index.js配置文件var config...
- 主要用来清除文件，默认webpack打包后dist文件下的js文件是不会自动清除的，修改之后再次打包旧的文件会仍然存在 主要用来清除文件，默认webpack打包后dist文件下的js文件是不会自动清除的，修改之后再次打包旧的文件会仍然存在
- 前言：我在b站上面学习Vue的时候需要使用webpack进行模块化，那就安装webpack，老师说由于webpack需要nodejs的支持，所以我们还需安装nodejs，所以我就先安装nodejs，然后在安装webpack小贴士： 该项目配套后端代码已经新鲜出炉》》》点我去看第一步：安装nodejs下载：老师上面nodejs的版本是10.13.0，所以我也安装该版本，在nodejs官网上面是... 前言：我在b站上面学习Vue的时候需要使用webpack进行模块化，那就安装webpack，老师说由于webpack需要nodejs的支持，所以我们还需安装nodejs，所以我就先安装nodejs，然后在安装webpack小贴士： 该项目配套后端代码已经新鲜出炉》》》点我去看第一步：安装nodejs下载：老师上面nodejs的版本是10.13.0，所以我也安装该版本，在nodejs官网上面是...
- 更好的维护代码，把 webpack.config.js 拆分成三个部分： 公 共 配 置 ： 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 ， 即 web... 更好的维护代码，把 webpack.config.js 拆分成三个部分： 公 共 配 置 ： 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 ， 即 web...
- 1 首屏加载慢？试试这几个减少资源体积的方法做前端的都知道，首屏加载速度直接关系到用户会不会继续用你的产品。有数据显示，页面加载时间每增加1秒，转化率就会下降7%。这个数字听起来很抽象，但想想你自己平时的使用习惯就明白了——打开一个网页，如果3秒还没加载出来，你是不是就想关掉了？我在实际项目中验证过这些方法，效果很明显。本文重点讲如何通过减少首屏资源体积来提升页面加载性能。 1.1 减少首... 1 首屏加载慢？试试这几个减少资源体积的方法做前端的都知道，首屏加载速度直接关系到用户会不会继续用你的产品。有数据显示，页面加载时间每增加1秒，转化率就会下降7%。这个数字听起来很抽象，但想想你自己平时的使用习惯就明白了——打开一个网页，如果3秒还没加载出来，你是不是就想关掉了？我在实际项目中验证过这些方法，效果很明显。本文重点讲如何通过减少首屏资源体积来提升页面加载性能。 1.1 减少首...
- 一、引言在单页应用（SPA）中，首屏加载速度直接影响用户体验与留存率。传统“全量加载”模式会将所有组件打包进初始bundle，导致：首屏资源体积过大，加载时间过长（尤其对移动端或弱网环境用户不友好）；未使用的组件占用内存，浪费资源；构建产物臃肿，部署更新效率低。Vue 提供的组件懒加载（结合异步组件与路由懒加载），通过“按需加载”机制，仅在组件即将进入视图时加载其代码，显著优... 一、引言在单页应用（SPA）中，首屏加载速度直接影响用户体验与留存率。传统“全量加载”模式会将所有组件打包进初始bundle，导致：首屏资源体积过大，加载时间过长（尤其对移动端或弱网环境用户不友好）；未使用的组件占用内存，浪费资源；构建产物臃肿，部署更新效率低。Vue 提供的组件懒加载（结合异步组件与路由懒加载），通过“按需加载”机制，仅在组件即将进入视图时加载其代码，显著优...
- 一、引言Vue 应用的构建性能直接影响开发迭代效率与 CI/CD 流水线成本。随着项目规模扩大（组件增多、依赖复杂），默认的 Webpack 构建流程会出现冷启动慢、热更新延迟、打包时间长等问题：开发环境下，修改代码后需等待 30 秒+才能看到预览；生产构建耗时 10 分钟+，阻塞 CI/CD 流水线；最终 bundle 体积过大，影响用户加载速度。本文聚焦缓存、并行构建... 一、引言Vue 应用的构建性能直接影响开发迭代效率与 CI/CD 流水线成本。随着项目规模扩大（组件增多、依赖复杂），默认的 Webpack 构建流程会出现冷启动慢、热更新延迟、打包时间长等问题：开发环境下，修改代码后需等待 30 秒+才能看到预览；生产构建耗时 10 分钟+，阻塞 CI/CD 流水线；最终 bundle 体积过大，影响用户加载速度。本文聚焦缓存、并行构建...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签