首页 > TAG信息列表 > Webpack
Webpack与Vite热更新差异对比
随着项目的日渐迭代，项目整体的代码量也会越来越多，从而导致项目体积越来越大；在Webpack时代，很多人会对历史项目（巨型项目）感到头疼，因为往往巨型项目在本地开发调试的时候会因为本地代码的修改触发HMR热更新重载页面，然而这一过程在Webpack的运行机制中显得很慢，并且是随着项目vue环境搭建与项目配置
一、安装node.js 安装vue前电脑中必须已经安装成功node.js node.js连接 https://nodejs.org/en/download/ 下载完成后，执行安装程序，直接进行安装即可（一直点next就行） 安装完成后，打开命令行窗口（cmd），命令行窗口快捷键win+r 输入node -v 和 npm -v 可webpack学习
webpack webpack介绍 用于现代 JavaScript 应用程序的静态模块打包工具，将高版本的代码打包成低版本能使用的代码（兼容低版本） webpack共分为四个部分* 入口 * 出口 * 加载器 * 插件 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器三、Webpack5项目
介绍 我们将使用前面所学的知识来从零开始搭建 React-Cli 和 Vue-cli。 Vue 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin")webpack基础_5处理图片资源
处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js"webpack配置详解 - 30.output
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中. 文档: https://www.webpackjs.com/concepts/output/ 1.文件结构 2.代码 add.js function add(x, y)webpack优化环境配置 - 24.lazy loading
//懒加载: 当文件需要时才加载~//预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true) //正常加载可以认为是并行加载(同一时间加载多个文件)。// 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容性差，只能在PC端一些高版本浏览器Webpack 打包 - 14. html压缩
这里使用 html-webpack-plugin 插件压缩 html 文件。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <!--这里是first note of Vue 黑马
1. webpack基本概念 用来打包压缩文件，减小文件的大小，提高效率；（生产环境使用的，不是人能看懂的） 默认入口: ./src/index.js 入口计算 默认出口: ./dist/main.js 这里结果输出 第三方的包管理，基于nodejs的打包的包； webpack的基本使用：初始化：yarn init -y 创建一个包管理文件packagewebpack 打包 - 6. 配置 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
配置devServer只需要在 webpack.config.js 中添加如下配置即可： // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：npx webpack-dev-server devServer: { // 项目跨域解决方法
jsonp 原理：利用了img，link，script，iframe标签都不存在跨域限制的特点，使用script标签传递函数 大致步骤：前端把一个函数（func）传递到后端，后端做字符串拼接，得到 "func('一段文字')" 的字符串，发送回前端后，前端就会执行 func('一段文字') 缺点：只能处理get请求，因为要通过?callback=xxx的形式；webpack基础_4处理样式资源
介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader（加载器） 来帮助 Webpack 解析样式资源。 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用。 官方文档找不到的话，可以从社区 Github 中搜索查询 webpack中文官方文档 处理 Css 资源 1. 下载包 npm i css-lwebpack基础_3开发模式介绍
开发模式顾名思义就是我们开发代码时使用webpack的模式。 这个模式下我们主要做两件事： 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源 代码质量检查，树立代码规范 提前检跨域的意义
目前知道，跨域有三种解决办法， 第一jsonp，这个感觉很麻烦，不学。 第二，cros，这个主要是后端服务器开始accessControlAllow origin，它开启几个不同源的http地址，那么那几个地址就可以跨域请求自己网站的数据了。 第三：前端使用webpack代理，如果是这样的化，那浏览器跨域岂不是毫无意义，因为VUE构建
VUE 渐进式 JavaScript 框架 易学易用 基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。 性能出色 经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。 灵活多变 丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。 VUE构建发布-build命令
1.配置webpack的打包发布 在package.json文件的script节点下，新增build命令如下： "script":{ "dev":"webpack server",//开发环境中，运行 dev 命令 "build":"webpack --mode production" //项目发布时，运行build命令 } 2.把JavaScript文件统一生成到js目录中 在webpack中的loader
1.loader概述 在实际开发过程中，webpack默认只能打包处理 .js 后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！ loader加载器的作用：协助webpack打包处理特定的文件模块。比如： css-loader 可以打包处理.css相关的文件 c解决：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件 根目录删除node_modules文件夹 运行“npm run dev”
解决：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件 根目录删除node_modules文件夹 运行“npm run dev” 相信很多人在使用webpack-dev-server时肯定会遇到一些问题（如下图所示） 我在学习vue框架的时候因为要使用到webpack工具，但这个工具又是基于node，而webpack中的插件
1.webpack插件的作用 通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件如下有两个： webpack-dev-server 类似于node.js阶段用到的nodemon工具 每当修改了源代码，webpack会自动进行项目的打包和构建 html-webpack-plugin webvue运行npm run dev报错：‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 npm install webpack-dev-server --save-d
vue运行npm run dev报错：‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 1、我先从git上拉到前端代码后，根据readme文档要求我执行了如下命令，下载依赖 npm install -g cnpm --registry ip地址:端口 值得注意的是，上面命令参数 -g 是下载全局依赖，不会将依赖下载到初识webpack
1.什么是webpack? 概念：webpack是前端项目工程化的具体解决方案 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性（根据配置，来兼容不同的浏览器版本）、性能优化等强大的功能 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发webpack css-loader模块化导致的antd样式不好用解决方案
css-loader 模块化会导致 antd 样式文件无效，解决的方式就是排除 node_modules 下的目标文件就可以 如果你用的 less 就可以按以下方式来配置 { test: /\.less$/, include: /node_modules/, // node_modules 下的 less 文件不使用模块化 use: [ { loader: MiniCssEvue-cli 配置优化
本文整理了一些 vue 开发中常用 vue-cli 配置，使用的 vue-cli 版本为 3.11.0，主要内容包括： 移除 preload 与 prefetch 使用 webpack-bundle-analyzer 做打包分析 使用 terser-webpack-plugin 清除 console.log 使用 compression-webpack-plugin 开启 gzip 压缩 配置使用 CDN 方式DevTools 无法加载来源映射：无法加载 webpack··· net::ERR_UNKNOWN_URL_SCHEME
问题：DevTools 无法加载来源映射：无法加载 webpack:///node_modules/element-plus/es/components/notification/src/notification.mjs.map 的内容：Fetch through target failed: Unsupported URL scheme; Fallback: HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME 当 webpack 打webpack4.15.1 学习笔记(九) — 最最基础的插件使用
目录html-webpack-pluginclean-webpack-pluginwebpack-manifest-pluginHotModuleReplacementPlugin(内置) 处理 webpack 在编译过程中的某个特定任务的功能模块，plugins 选项用于以各种方式自定义 webpack 构建过程。其中webpack 附带了各种内置插件，可以通过 webpack.[plugin-name]