webpack5

webpack5搭建react框架-基础环境配置

一、前言通过使用webpack5配置基础react框架来学习webpack相关知识。
前端三脚猫·2023-04-04 14:12

使用webpack5自己搭建react项目脚手架（手把手教，把手伸过来，好软~呸，好手）

问：目前前端最火的两大框架react和vue官方都有自己的成熟的cli脚手架，为什么还要自己搭建脚手架了？答：一、自己搭建脚手架可以根据自己公司的项目特征来决定使用哪些具体的插件或者编译方式，官方的脚手架都是大众化的，大而全的，所以自己搭建的更灵活。二、装逼不管你是哪种原因，本教程都适用教程目录一、初始化项目二、react项目相关的包安装三、webpack配置文件代码编写四、页面运行测试一、初始化
朕.·2023-04-04 14:09

手动搭建React Mobile项目脚手架--webpack5

代码地址webpack版本5.70.01bebal配置npminstall--save-dev@babel/core@babel/cli@babel/preset-env@babel/preset-typescript@babel/preset-react@babel/cli@babel/core@babel/preset-env设置babel转换的目标浏览器@babel/preset-types
跑跑快跑·2023-04-04 13:48

从零搭建Webpack5-react脚手架(附源码)

webpack5近期终于有时间和精力专注于公司技术基础建设了，于是一开始，将公司的Saas系统改造成了微前端模式，解决了历史遗留的一部分问题接着，想着webpack5已经发布这么久了，该在生产环境用起来了
Peter 谭·2023-04-04 13:46

实践：基于Webpack5搭建React+TS开发环境

前言最近学习了Webpack5之后，想自己搭建个项目练练手，于是就搭建了一个基于Webpack5的React的脚手架。
火星飞鸟·2023-04-04 13:57

webpack5搭建react框架-开发环境配置

webpack5配置react基础开发环境1、前言之前已经使用webpack5进行了react框架基础环境的搭建（基础环境配置），但是每次修改完项目代码都需要重新执行npmrunbuild指令进行构建，
前端三脚猫·2023-04-04 13:51

Vue + Node + MongoDB 前后端分离搭建一款简约的个人博客系统

前端项目主要是采用Vue2和Element-UI来搭建的；采用Webpack5来构建、打包。后端项目主要采用Node框架Koa2以及MongoDB数据库来设计的。
苏s哈·2023-04-04 01:50

TypeScript 快速入门

目录第一章快速入门0、TypeScript简介1、TypeScript开发环境搭建2、基本类型3、编译选项4、webpack5、Babel第一章快速入门0、TypeScript简介TypeScript是
前端 贾公子·2023-04-03 21:01

webpack5部署vue3商业项目详细流程

web5deployVue3目录文章目录推荐阅读前言初始化目录1.初始化`webpack.config.js`2.安装`webpack`注意3.初始化目录和文件总结配置核心功能问题1.安装依赖2.修改`webpack.config.js`配置注意处理样式1.安装依赖2.修改`webpack.config.js`配置注意处理图片等静态资源1.安装依赖2.修改`webapck.config.js`配置
莫兮是我·2023-04-03 18:43

webpack 之 webpack5 webpack-dev-server 版本兼容问题

在写从0创建一个webpack5项目这篇文章时遇到的这个问题，在终端执行npmrundev，怎么样都起不来服务，还给我报这样的一个错误：首先按照国际惯例，先报一下存在兼容问题时的版本和配置："webpack
山间听雨声·2023-04-03 00:13

构建工具 Vite、Webpack、Rollup对比

Webpack介绍热更新方面：webpack支持HMR，但是webpack需要全部重新编译并更新，效率较低tree-shaking：webpack2开始支持且消除效果不好，但是webpack5有更好的tree-shaking
十一T_T·2023-03-31 05:23

浅浅学习复习一下webpack

这次还是用得是webpack4得，webpack5看了，但都差不多，只是优化算法得改变，和一些属性。在之前作者也曾提过webpack5.0旨在减少配置的复杂度，使其更容易上手(we
小白6402·2023-03-29 20:18

webpack4升级到webpack5遇到的问题

1.configuration.devtoolshouldmatchpattern"^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".解决办法：改成eval-cheap-module-source-map2.编译出现很多警告(node:25784)[DEP_WEBPACK_MODULE_ID]Deprecat
墨子柚·2023-03-29 17:40

webpack5常用配置

该常用配置使用的npm包："dependencies":{"autoprefixer":"^10.4.4","clean-webpack-plugin":"^4.0.0","css-loader":"^6.7.1","html-webpack-plugin":"^5.5.0","postcss-loader":"^6.2.1","webpack":"^5.70.0","webpack-cli":"
_孤傲_·2023-03-29 13:44

Webpack5结合mockjs

webpack5之前使用的是devServer.before来配置mock服务,到了webpack5则改为devServer.setupMiddlewares参考文档:https://webpack.js.org
ZZES_ZCDC·2023-03-27 09:44

Vue3学习之旅--之webpack基础-进阶--webpack5?拿来吧你！

文章目录Webpack打包其他资源file-loader文件的命名规则设置文件的名称设置文件的存放路径url-loaderurl-loader的limitassetmoduletype认识assetmoduletypeassetmoduletype的使用url-loader的limit效果加载字体文件字体的打包webpack的plugin认识pluginCleanWebpackPluginHtml
尤雨东·2023-03-24 04:10

webpack5 高级配置

虽然在日常开发中，我们使用vue和react框架，它们的脚本架vue-cli和react-react-app会帮我们配置最基本的webpack，但我们了解webpack的一些配置，会让我们在需要特定个性化配置时不至于手忙脚乱，能够做进一步优化操作等。在vue-cli中，要查看webpack的默认配置，可以在项目中使用vueinspect命令查看；在react-react-app中，使用npmrun
miao8862·2023-03-22 00:46

奇舞周刊第 343 期：前端智能化 - 思维转变之路

记得点击文章末尾的“阅读原文”查看哟~下面先一起看下本期周刊摘要吧~奇舞推荐■■■精读《Webpack5新特性—模块联邦》模块联邦是Webpack5新内置的一个重要功能，可以让跨应用间真正做到模块共享，
奇舞周刊·2023-03-19 13:45

Webpack5笔记

一、Webpack原理相关概念树结构：在一个入口文件引入所有资源并形成依赖关系树状图模块：可以是ES6模块、CommonJs或者AMD模块（对于webpack来说一切资源皆模块，不如css，img等等）chunk：打包过程中被操作的模块文件叫chunk，比如异步加载一个模块就是一个chunkbundle：最后打包后的文件叫做bundle，大多数是多个chunk的合集二、安装与体验初始化packag
Coder__T·2023-03-15 06:18

【填坑】webpack5中optimize-css-assets-webpack-plugin无法实现压缩css

一开始以为是OptimizeCssAssetsWebpackPlugin插件没有使用，然后查看了plugins已经使用了OptimizeCssAssetsWebpackPlugin。啊？这啥情况？最后找到了皮蛋很白大佬的webpack二刷之五、生产环境优化（5.提取压缩CSS）文章，写的也很清楚，原来是：webpack官方文档介绍时并不是将「OptimizeCssAssetsWebpackPlug
不知如何·2023-03-15 06:48

前端知识体系4.前端工程化1.Webpack专题

loader的原理及手写loader的思路6.plugin的原理及手写plugin的思路7.loader和plugin的区别8.treesharking是什么9.什么是webpack热更新10.介绍下webpack5
前端辉羽·2023-03-15 02:03

Typescript快速入门

Typescript快速入门第一章快速入门0、TypeScript简介1、TypeScript开发环境搭建2、基本类型3、编译选项4、webpack5、Babel第二章：面向对象0、面向对象简介1、类（
会思想的苇草i·2023-03-12 08:33

【Vue源码解析】Vue虚拟dom和diff算法

Vue虚拟dom和diff算法1.简介2.搭建环境1.安装snabbdom2.安装webpack5并配置3、函数3.1虚拟节点vnode的属性3.2使用h函数创建虚拟节点3.3使用patch函数将虚拟节点上
糖^O^·2023-03-12 07:29

vue-cli2 老项目webpack3升级webpack5过程总结

文章目录背景一、webpack5环境要求二、升级步骤1.脚手架webpack-cli2.升级webpack包3.更新webpack相关插件3.1不推荐或被移除的插件3.2升级babel到7版本3.3更新插件
娃哈哈_·2023-03-12 04:28

webpack5新特性Asset Modules资源模块详解

AssetModules(资源模块)是webpack5的新特性，它允许使用资源文件（字
·2023-03-08 21:15

BREAKING CHANGE: webpack ＜ 5 used to include polyfills for node.js core modules by default.

报错，原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入解决方案：1.安装npminstallnode-polyfill-webpack-plugin2
无聊大侠hello world·2023-02-23 06:41

最通俗易懂的webpack5 带你简单入门

1.什么是webpack？webpack是用于编译JavaScript模块。通俗的来说，webpack的一个模块打包器。本质上就是一个构建（包含：编译，压缩，丑化等）工具，且是目前最流行的构造工具。可以对所有资源（.html,.sass,.scss,.css,.png|.jpg|.jpeg,.js|.ts,模板文件ejs,hbs,pug）进行打包。2.如何安装2.1cnpmiwebpack-gcn
A-linWeb·2023-02-22 02:04

Taro 3.5 beta 编译提速，支持 Webpack5、React 18...

因此在v3.5版本中Taro重点对编译系统进行了重构，引入对Webpack5的支持，改善小程序&H5编译时的性能与体验。
凹凸实验室·2023-02-17 05:09

如何通过webpack5搭建vue3+ts项目

现阶段前端打包工具很多，目前常用的是webpack，grunt等，在没出现更好的工具之前，学好这两个其中的一个基本都够用了，目前最流行的还属webpack，也是很多面试官喜欢问的话题，这篇文章从零了解打包机制，只要你有耐心保证你会有收获。安装webpack和webpack-cli依赖首先，还是需要初始化项目（npminit），这里安装的依赖建议是本地依赖而不是全局依赖，如果安装本地依赖又安装全局依
祝家庄打烊·2023-02-06 08:01

webpack5的HMR热更新不起作用-踩坑

前言最近在自己尝试着用了最新的webpack5去构建项目(webpack5+react-hot-loader)，由于webpack5版本较新，配置过程中遇到了踩了不少坑（比如最常见的插件版本不兼容等）。
出来码两行·2023-02-02 04:30

webpack 5高级配置优化

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

Webpack5 新特性业务落地实战

本文作者：Wind、Skyler、ZRJ、ZJ前言Webpack5在2020年10月10日正式发布，并且在过去的几个月中快速演进和迭代，截止1月28日，Webpack5已经更新了18个minor版本，带来了许多十分吸引人的新特性
frontend_frank·2023-01-22 00:53

前端脚手架开发入门

目前个人习惯基于当前主流的webpack打包工具开发项目，所以此脚手架是基于webpack5开发的。概览本文我们先实现作为脚手架最基本的功能：输入命令创建统一的模板项目开发依赖开发一个的脚手架，你至少
·2023-01-08 16:41

webpack5 自定义配置

参考文档webpack官网:https://webpack.docschina.org/concepts/1.packjson介绍{"name":"my-app",//项目的名称长度必须小于或等于214个字符，不能以“.”和“_”开头，不能包含大写字母"version":"0.1.0",//组成的标识是唯一的，改变包的时候应该同时改变version"private":true,//private字
暗色调~·2022-12-31 18:16

webpack5 基础配置

webpack4基础配置，点此查看初始化确保本地安装node,安装完成后命令行输入node-v查看node版本号（我本地安装的版本是14.17.0）如果本地不同项目需要不同的node版本环境，可以点击此处下载n管理和切换node版本node安装好之后可以开始webpack之旅了！//创建文件夹，也可以手动新建文件夹mkdirwebpack5demo//进入文件夹cdwebpack5demo//重点
躺在家里不干活·2022-12-31 18:14

webpack5 基本配置

基本配置5大核心概念entry（入口）—使用相对路径指示Webpack从哪个文件开始打包output（输出）—使用绝对路径指示webpack打包完的文件输出到哪里，怎么命名loader（加载器）webpack本身只能处理js、json等资源，其他资源需要借助loader，webpack才能解析plugins（插件）扩展webpack的功能mode（模式）主要有两种模式开发模式：developmen
TA_WORLD·2022-12-31 18:42

极致编译速度，一文搞定webpack5升级

本文作者：xiongxiao01在尝试升级webpack5之前，建议大家尽量先把官方文档通读一遍，可以少走很多弯路，本文是在结合具体业务场景后，对官方文档的归纳和补充。
·2022-12-29 17:50

webpack5之output和devServer的publicPath区别示例详解

目录一.output的publicPath二.devServer的publicPath一.output的publicPath我们知道output中的path的作用是打包后文件输出的目录：比如静态资源的js、css等输出，常见的会设置为dist、build文件夹等；output中还有一个publicPath属性，该属性是指定index.html文件打包引用的一个基本路径：它的默认值是一个空字符串，所
·2022-12-24 12:38

webpack5之devServer的常用配置详解

目录前言一.contentBase二.hotOnly、hot、host配置1.hotOnly、hot2.host设置主机地址三.port、open、compress四.Proxy代理五.historyApiFallback前言devServer是为开发过程中,开启的一个本地服务,在此总结一些常用的配置。供大家学习，相互成长，相互进步！一.contentBasedevServer中contentBa
·2022-12-24 12:38

Webpack完整打包流程分析

下面我们基于webpack5源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。
·2022-12-14 14:27

为Webpack5项目引入Buffer Polyfill

前言最近在公司的一个项目中使用到了Webpack5，然而在使用某个npm包的时候，出现了Bufferisnotdefined这个问题，原因很明显了，因为浏览器运行时没有Buffer这个API，所以需要为浏览器引入
·2022-12-14 14:53

webpack5基础配置 （3）打包其他资源 asset module type资源类型

资源模块类型（assetmoduletype）上一篇说了webpack5打包其他资源已经可以不用到file-loader与url-loader了。
coderlin_·2022-12-12 09:36

前端工程化之模块化开发

分享一下前端工程化中有关于模块化开发的相关知识【以Webpack5为主】。每天进步一点点。
gongyexj·2022-12-09 13:56

前端系列主题：从0到1使用Webpack5 + React + TS构建标准化应用

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

webpack的学习

webpack的学习尚硅谷2020最新版Webpack5实战教程(从入门到精通)，哔哩哔哩链接：https://www.bilibili.com/video/BV1e7411j7T5?
我爱学习呀·2022-11-24 05:09

webpack5 import动态导入实现按需加载并给文件统一命名的配置方法

想要实现按需加载，动态导入模块。还需要额外配置：console.log("hellomain");document.getElementById("btn").onClick=function(){//动态导入-->实现按需加载-->then是加载成功要做的处理不处理的话可以不写import("./js/math.js").then(({count})=>{console.log(count(2,
·2022-11-21 00:34

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

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

前端脚手架开发入门

目前个人习惯基于当前主流的webpack打包工具开发项目，所以此脚手架是基于webpack5开发的。概览本文我们先实现作为脚手架最基本的功能：输入命令创建统一的模板项目开发依赖开发一个的脚手架，你至少
·2022-11-16 22:48

webpack5 css modules配置（scss导出变空对象）

webpack升级到5发现原先的xx.scss导出变量不能用了  返回一个空对象，心中万马奔腾import$stylefrom'@/xxx/exportVariable.scss'console.log($style)//{}解决方法：1、使用xx.module.scss【推荐】把原先的xx.scss改成xx.module.scss就可以了import$stylefrom'@/xxx/export
Jabo·2022-11-12 21:48

联邦模块（概述，实战应用，基本原理，未来展望）

联邦模块是什么·是Webpack5的新特性之一，允许在多个webpack编译产物之间共享模块、依赖、页面甚至应用·提供了一种轻量级的、在运行时，通过全局变量组合，在不同模块之前进行数据的获取·提供了一种解决应用集的官方方案
一路向阳~负责的男人·2022-11-11 14:08
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他