- 一、前言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...
- 项目中利用 webpack 的 require.context 实现批量引入/导入图片引言 (Foreword/Motivation)在 Web 开发中，我们经常需要在项目中引入图片、字体或其他静态资源。当资源数量较少时，手动使用 import 或 require 语句引入每个文件是可行且清晰的。例如：import logo from './images/logo.png';import i... 项目中利用 webpack 的 require.context 实现批量引入/导入图片引言 (Foreword/Motivation)在 Web 开发中，我们经常需要在项目中引入图片、字体或其他静态资源。当资源数量较少时，手动使用 import 或 require 语句引入每个文件是可行且清晰的。例如：import logo from './images/logo.png';import i...
- Webpack Bundle Analyzer 是一个可以帮助开发者分析和可视化 Webpack 打包内容的工具。它能够展示项目中所有打包模块的详细信息，包括文件的大小、引用关系、依赖情况等。这种可视化的方式使得开发者可以更加直观地了解整个项目的构建情况，从而在优化代码和缩小包体积方面提供很大的帮助。Webpack Bundle Analyzer 的核心作用在于为开发者提供一个用于审查和改进... Webpack Bundle Analyzer 是一个可以帮助开发者分析和可视化 Webpack 打包内容的工具。它能够展示项目中所有打包模块的详细信息，包括文件的大小、引用关系、依赖情况等。这种可视化的方式使得开发者可以更加直观地了解整个项目的构建情况，从而在优化代码和缩小包体积方面提供很大的帮助。Webpack Bundle Analyzer 的核心作用在于为开发者提供一个用于审查和改进...
- 代码片段如下：npm run build -- --stats-json && npx --yes webpack-bundle-analyzer dist/myapp/stats.json这是一个由多部分组成的脚本，涉及到 npm 的构建命令和 Webpack 打包分析工具的调用。我会逐个 token 进行详细的解释，从中解构出每一个部分的功能和含义。我们可以将这一行代码分成两个主要部分，... 代码片段如下：npm run build -- --stats-json && npx --yes webpack-bundle-analyzer dist/myapp/stats.json这是一个由多部分组成的脚本，涉及到 npm 的构建命令和 Webpack 打包分析工具的调用。我会逐个 token 进行详细的解释，从中解构出每一个部分的功能和含义。我们可以将这一行代码分成两个主要部分，...
上滑加载中
推荐直播
-
5分钟让华为云主机加持deepseek2025/05/21 周三 20:00-21:30
刘光智 全栈高级工程师，CSDN优质创作者
本期直播将与您一同体验如何在华为开发者空间云主机上，一步步完成 Open WebUI 环境搭建及 DeepSeek 模型接入，并进行简单的文本生成任务。
回顾中 -
星闪应用开发技术课程（群）建设思路与设想2025/05/22 周四 19:00-21:00
葛非 华为开发者布道师
华中师范大学计算机学院副教授-葛非老师将深入讲解星闪核心技术及其支撑技术，并讨论如何将这些技术融入到通信工程、计算机科学与技术、软件工程等专业的课程内容中，旨在推动高等教育领域星闪鸿蒙生态的有序发展。
即将直播
热门标签