- 一、前言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 体积过大，影响用户加载速度。本文聚焦缓存、并行构建...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签