webpack5

webpack5 添加babel-loader 添加浏览器ie11兼容打包

cnpmi-D@babel/core@babel/preset-envbabel-loadercore-js2.webpack.conf.jsconstpath=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={mode:'production',devtool:'source-
qq_41167198·2023-11-19 06:51

web3.0 升级到webpack5.0 以及兼容IE处理

webpack3的打包速度已成为诟病，所以我们将原来的webpack3升级至webpack5首先就是原来的项目结构，主要在于build目录下面，存在基础配置，开发配置，生产配置build|-------
web前端执行者·2023-11-17 13:17

webpack5优化

介绍本章节主要介绍Webpack高级配置。所谓高级配置其实就是进行Webpack优化，让我们代码在编译/运行时性能更好~我们会从以下角度来进行优化：提升开发体验提升打包构建速度减少代码体积优化代码运行性能提升开发体验SourceMap为什么开发时我们运行的代码是经过webpack编译后的，例如下面这个样子：/**ATTENTION:The"eval"devtoolhasbeenused(maybe
mildness丶·2023-11-14 09:03

TypeScript 基本语法

TypeScript基本语法前言第一章快速入门0、TypeScript简介1、TypeScript开发环境搭建2、基本类型3、编译选项4、webpack5、Babel第二章：面向对象1、类（class）
不爱吃奶昔（zsl0）·2023-11-08 14:51

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(depende

modulepropertywasremovedfromDependency(usecompilation.moduleGraph.updateModule(dependency,module)instead)原因：下载的webpack版本过高，目前是webpack5
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ·2023-11-08 02:56

webpack配置优化,让你的构建速度飞起

前言越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~我们会从以下角度来进行优化：提升打包构建速度减少代码体积优化代码运行性能提升打包构建速度在进行打包速度优化之前
gogo2027·2023-11-05 02:08

升级webpack5后chainWebpack链式调用插件，插件回调参数为undefined

最近将项目升级到了vue-cli5和webpack5，发现之前有些loader和插件的链式调用后回调参数args为undefined，如url-loader和html-webpack-plugin，tap
cyh5d·2023-11-05 02:07

Webpack5学习笔记(持续更新)

1webpack简介1.1webpack是什么webpack是一种前端资源构建工具，一个静态模块打包器(modulebundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2webpack五个核心概念1.2.1Entry入口(Entry)指示webpa
节省钱·2023-11-02 16:45

webpack5与webpack4之devSever配置 Invalid options object. Dev Server has been initialized using an optio

当进行webpack4中的配置时deServer配置如下：const{resolve}=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js',output:{filename:'built.js',path:resolve(__dirn
椿魏·2023-11-01 04:04

Webpack5中devServer配置contentBase报错的问题

结果报错，没有contentBase这个属性，已经被弃用了。新的配置方式：constpath=require('path');module.exports={//...devServer:{static:{directory:path.join(__dirname,'public'),},compress:true,port:9000,},};
一个专注写代码的程序媛·2023-11-01 04:33

Webpack5 系列:Babel 的配置

1.前言本篇将介绍对于项目中JS文件的处理。2.babel-loader2-1.依赖安装npminstall-Dbabel-loader@babel/core@babel/preset-env2-2.Loader配置webpack.config.jsmodule:{rules:[{test:/\.?js$/,exclude:/node_modules/,use:{loader:'babel-loa
一个专注写代码的程序媛·2023-11-01 04:33

webpack5 打包静态资源上传阿里云OSS-以next为例

关于阿里云（前置工作）首先需要在阿里云OSS开通服务，创建自己的Bucket列表。出与安全考虑。需要设置为私有读写权限。在阿里云获取accessKeyId和accessKeySecret查看自己的region。（英文regionId）代码部分引入webpack插件npmiwebpack-aliyun-oss-Dnpmishort-uuid-D判断是否需要进行上传阿里云需要根据环境判断是否需要将资源
纯粹的少年·2023-10-29 19:44

Webpack5学习笔记（基础篇八）——代码分离

代码分离是webpack中最引人注目的特性之一。此特性能够把代码分离到不同的bundle中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。常用的代码分离方法有三种：入口起点：使用entry配置手动地分离代码防止重复：使用Entrydependencies或者SplitChunksPlugin去重和分离chunk
老Chen先生·2023-10-28 09:54

利用webpack5实现代码的共享

在前端项目中经常遇到这种情况。痛点：随着企业的业务迅速铺开，项目数量越来越多，业务功能越来越复杂。几个小组并行开发会极大地提高开发效率，但稍不注意，就会出现几下几个问题：相同、类似的功能，在一同项目中反复出现为了迅速上线，将一个成熟的模块/功能，在不同的项目间copy随着时间的流逝，一个小的改动就需要花大量人力工时，而且还易容出错，项目维护变得举步为艰。。。。要列的话可能还有其他问题。当然，也可以
hupo256·2023-10-28 08:27

webpack 打包运行react项目报错HtmlWebpackPlugin is not defined解决方案

运行yarnwebpack打包项目报错HtmlWebpackPluginisnotdefined，采坑过程升级webpack-cli版本、降低webpack版本都没有作用，我的项目中使用的是webpack5
宋小菜_菜菜·2023-10-28 04:44

【前端】Webpack5中Html和CSS的压缩打包

）webpack的发展历程2012.3—webpack（问世）2014.2—webpack12016.12—webpack22017.6—webpack32018.2—webpack42020.10—webpack5
互联网小阿祥·2023-10-25 06:46

【前端vue面试】TypeScript

目录快速入门0、TypeScript简介1、TypeScript开发环境搭建2、基本类型3、编译选项4、webpack5、Babel面向对象1、类（class）2、面向对象的特点3、接口（Interface
江拥羡橙·2023-10-24 10:56

【webpack】wabpack5 知识梳理

1、简单介绍默认功能可处理js、json文件，处理js文件引入将其打包；可处理字体、图片、音视频等静态资源（webpack5有内置loader：asset）；将es6的import规范编译为浏览器可识别的
ANKG·2023-10-23 23:23

webpack5配置说明

webpack的命令行方式配置例子。格式通常是--[要设置的属性][要设置的key]=[要设置的值（如果该值没有则默认true）]npxwebpack--modeproduction--output-path='./dist'--output-filename='[name][hash].bundle.js'设置环境变量命令，要使用环境变量，必须使用module.exports=(env)=>{r
loveULife·2023-10-22 09:28

《基于 Vue 组件库 的 Webpack5 配置》9.module.exports 可为数组类型且注意编译顺序

module.exports常见是对象类型，其实也可用数组类型；注意编译顺序，从后往前编：也就是说先编another.js，再编index.js；所以代码第9行不能设置为true，仅在第一次，也就是代码第19行设置一次即可清空整个output文件夹；如果代码第9行设置为true，则在编index.js时，会删除another.js已编译好的文件；module.exports=[{mode:'pro
AvatarGiser·2023-10-21 09:01

《基于 Vue 组件库 的 Webpack5 配置》8.在生成打包文件之前清空 output(dist) 目录（两种方式）

方式一如果webpack是v5.20.0+，直接使用属性output.clean，配置如下：module.exports={//...output:{clean:true},};方式二如果使用较低版本，可以使用插件clean-webpack-plugin：先安装：npmiclean-webpack-plugin-D；再配置：const{CleanWebpackPlugin}=require('cl
AvatarGiser·2023-10-21 09:39

webpack5 新特性

1：剔除npm包里面针对Node.js模块自动引用的Polyfillsv4编译引入npm包，有些npm包里面包含针对nodejs的polyfills，实际前端浏览器是不需要的例如：//index.jsimportCryptoJSfrom'crypto-js';constmd5Password=CryptoJS.MD5('123123');console.log(md5Password);v4引入c
flyrain2020·2023-10-21 09:12

webpack 5--学习笔记

webpack5–学习笔记部分配置文件constpath=require('path')constCopyWebpackPlugin=require('copy-webpack-plugin')const
xiongfang1105·2023-10-20 11:15

webpack5学习笔记-2

1、webpack-dev-servernpminstall-Dwebpack-dev-server把数据都写在了内存里，而不是硬盘的dist目录基本配置package.json"scripts":{"test":"echo\"Error:notestspecified\"&&exit1","build":"webpack--modedevelopment","serve":"webpackser
Marst_0803·2023-10-20 11:42

webpack5学习笔记—基础篇

目录1.webpack1.1Webpack是什么？有什么用？1.2webpack的几个概念2.webpack的基础使用3.2.1安装3.2.2webpack配置文件3.2.3打包命令3.资源模块resourceinlinesourceasset3.loader1.什么是loader2.处理css文件2.1加载css和less2.2抽离和压缩css3.图片资源4.字体资源5.数据资源1.webpac
yugioo·2023-10-20 11:42

【webpack】webpack模块化原理学习笔记

ESModule实现原理CommonJS与ESModule相互导入实现原理前言我们发现webpack会帮助我们支持各种模块化方案，可以通过阅读打包后的文件来了解一下CommonJS与ESModule在webpack5
名字太长不好不好·2023-10-20 11:09

Webpack5学习笔记（基础篇）

Webpack基本概念是什么？是一个静态资源打包工具。可以做什么？分为两种模式，分别是开发模式和生产模式。开发模式（development）：仅能编译JS中的ESModule语法生产模式（product）：既能编译JS中的ESModule语言，还能压缩JS代码入门创建项目（文件夹）在项目所在文件夹中使用npminit生成package.json文件使用npminstallwebpackwebpac
一只学弱狗！·2023-10-20 11:39

webpack5基础-学习笔记

学习资源：https://www.bilibili.com/video/BV1964y1k7Hm?from=search&seid=8848052436743801145&spm_id_from=333.337.0.01.webpack简介1.1概念构建：通过编译、格式化校验、压缩等操作，将不支持的代码转化为支持的代码；打包：将多个文件合并成一个文件（bundle.js），避免引入多个文件页面加载
怕谁失望·2023-10-20 11:06

webpack5进阶-学习笔记

学习连接：https://www.bilibili.com/video/BV1964y1k7Hm?p=19&spm_id_from=pageDriver1.区分环境打包1.1通过环境变量区分执行webpack命令时可携带环境变量，并在webpack.config.js中通过函数参数形式接收。1.2通过配置文件区分1.2.1配置文件配置过程(1)安装webpack-merge：npmi-Dwebpa
怕谁失望·2023-10-20 11:06

webpack5学习笔记

基本使用1.资源目录：webpack_code#项目根目录（所有指令必须在这个目录下运行|____src#项目源码目录|___js#js文件目录||__count.js||__sum.js|____main.js#项目主文件2.创建文件count.jsexportdefaultfunctioncount(x,y){returnx-y;}sum.jsexportdefaultfunctionsum(
DIUDIUjiang·2023-10-20 11:04

【Webpack5】Webpack学习笔记(一)

Webpack基础Webpack前言1.Webpack使用2.配置项2.1entry(入口)2.1.1单入口写法2.1.2对象语法2.1.2.1描述入口的对象2.1.3常见场景配置2.1.3.1分离app(应用程序)和vendor(第三方库)入口2.1.3.2多页面应用程序2.3output(输出)2.3.1有多个入口2.3.2高级进阶2.4loader（加载器）2.4.1使用loader2.4.
秦哈哈·2023-10-20 11:33

webpack4 升级至 webpack5 过程总结

本文章记录本次从webpack4框架升级为webpack5之后衍生出来的所有更改框架主体为zzy-project-cli(地址在文末)此项目为自行开发构建，包含原webpack4版本和升级后的webpack5
想必是渣渣宇了·2023-10-19 15:34

重学webpack5——开发环境配置

目录一、创建配置文件二、打包css、less资源三、打包HTML资源四.打包图片资源（1）CSS中图片资源background-image:url()（2）HTML中的图片资源五、打包其他资源五、devServer开发环境配置总结一、创建配置文件跟前面一样，先创建npminitnpmiwebpackwebpack-cli-D二、打包css、less资源创建webpack配置文件webpack.co
果冻OoO·2023-10-19 11:29

webpack5 基础配置 loader的认识 css-loader

webpack5之前也是一直对webpack有大概的了解，没有一个全面的学习，现在忙完答辩了，好好从头到尾学习一下。
coderlin_·2023-10-19 11:26

webpack5（Module Federation）+vue3.0实现微前端

项目源码地址：https://github.com/wuxiaohuaer/webpack5-vue-admin一、什么是微前端微前端是一个比较宏观的概念，他的核心就是独立，开发独立、部署独立，比较适合大的团队来进行重量级项目开发。从MicroFrontends官网可以了解到，微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍
爱踢球的jerry·2023-10-18 13:46

taro build 提示webpack5

yarninstall没有报错，但是build的时候突然多出个缺少npm包@tarojs/webpack5-runner，开始安装...image.png然后就开始报错image.png项目里没有用到webpack5
王善良_·2023-10-17 17:35

新安webpack插件后编译报错compiler.plugin is not a function

安装使用generate-asset-webpack-plugin时报错TypeError：compiler.pluginisnotafunction，网上搜索了一下大概就是webpack5与这些插件不匹配
葡萄的愤怒·2023-10-17 14:16

深入Vue3+TypeScript技术栈-课程文章目录

课程文章目录课程核心文章目录深入Vue3+TypeScript技术栈-课程文章目录课程核心1.0Vue3核心知识深入解析2.0Vue-Router4.x,Vuex4.x,CompositionAPI等详细解析3.0基于Webpack5
以码平川·2023-10-17 02:43

react-antd-admin 后台管理系统，就这样应运而生

react-adminAmagicalreactadmin目前就是从零开始使用webpack搭建环境，用到是webpack5来搭建react环境，使用到了以下这些插件babel-loader用来转义es6
同名公众号 - 人生代码·2023-10-14 05:50

webpack5

为什么有webpack？web1.0阶段，还没有明确前端岗位，主要职责是编写静态页面，用Js来进行表单验证或动画效果。为了在页面上动态填充数据，后面也出现了php、jsp这种开发模式。web2.0阶段，伴随ajax的诞生，不止负责展示界面，还能管理数据、和用户进行交互，这就诞生了jquery这样的前端库。web3.0阶段，大前端开发/现代前端开发，前端工作变得多样化和复杂化，不止pc端、移动端、小
聪明绝顶的你与即将秃头的我·2023-10-14 05:28

webpack 5.0 HtmlWebpackPlugin插件报错，The ‘compilation‘ argument must be an instance of Compilation

就是webpack5太新了，以前的html-web-pack-plugin支持不了了解决方法：先把先有的html-webpack-plugin卸载了npmuninstallhtml-webpack-plugin
ArthurHsing·2023-10-14 05:58

【webpack5修行之道】第16篇：性能优化-externals

上一篇：【webpack5修行之道】第15篇：性能优化-多进程打包什么是externals？
jay_mw·2023-10-14 05:27

Webpack5 htmlwebpackplugin用法

文章目录HtmlWebpackPlugin介绍HtmlWebpackPlugin用法1.安装HtmlWebpackPlugin插件：2.引入HtmlWebpackPlugin插件：3.配置HtmlWebpackPlugin：4.更多HtmlWebpackPlugin配置选项：总结HtmlWebpackPlugin介绍Webpack是一个功能强大的模块打包工具，而HtmlWebpackPlugin是
有趣的小良·2023-10-14 05:50

Webpack5打包报错ducument is not defined

正常测试完字体，用的是样式表导入的css文件，然后直接打包报错如下：ERRORinError:webpack://project/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:93varstyle=document.createElement('style');^ReferenceError:docume
Nithumahel·2023-10-12 07:34

webpack5打包ReferenceError: document is not defined

错误信息：目录结构：HTML文件：webpack5webpack.config.js:constpath=require('path')varHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:"./src/index.js",output:{path:path.resolve(__dirname,'dist
小猪与浩·2023-10-12 07:56

从0到1使用 Webpack5 + React + TS 构建标准化应用

前言本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack+react+typescript的标准化前端应用。技术栈:webpack5+React18+TS工程化:eslint+prettier+husky+githooks支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题支持热更新、资源压缩、代码分离（动态导入、懒加载等）、缓存
阿里云云栖号·2023-10-11 07:16

从0到1使用Webpack5 + React + TS构建标准化应用

前言本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack+react+typescript的标准化前端应用。技术栈:webpack5+React18+TS工程化:eslint+prettier+husky+githooks支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题支持热更新、资源压缩、代码分离（动态导入、懒加载等）、缓存
一堆土豆33·2023-10-11 07:15

js 和 css 打包分离

参考官方文档：https://webpack.docschina.org/plugins/mini-css-extract-plugin/webpack5以上可用，用mini-css-extract-plugin
fred_33c7·2023-10-09 22:53

【前端学习记录】webpack学习之mini-css-extract-plugin插件

前言最近在学习尚硅谷的webpack5课程，看到mini-css-extract-plugin这个插件的时候，感觉很有帮助，之前都没有在css这方面深入思考过，课程中的一些记录写在下面为什么需要优化CSSCss
Note_creek·2023-10-09 22:57

webpack-资源模块类型(asset module type)使用详解

我们当前使用的webpack版本是webpack5：在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader、url-loader、file-loader；在webpack5
ICanWin_lll·2023-10-08 20:27
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他