Webpack5 第9页

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

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

阿里云技术·2022-09-07 14:19

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

简介：本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack+react+typescript的标准化前端应用。作者|刘皇逊(恪语)来源|阿里开发者公众号前言本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack+react+typescript的标准化前端应用。技术栈:webpack5+React18+TS工程化:eslint+prettier+husky+githook

·2022-09-07 13:17

webpack定制化高级配置[热更新、热打包、别名、调试]

前提：webpack5及其对应配套内容node16.13.2本文作用在webpack.config.jswebpack定制化基础配置[基础、配置、初运行]一、高级配置1.webpack-dev-server

黑日里不灭的light·2022-09-06 07:31

JavaScript webpack5配置及使用基本介绍

目录一、webpack1.1简介1.2五大核心概念entry(入口)output(出口)loaderplugin(插件)mode(模式)二、配置及使用项目结构使用html-webpack-plugin三、写在最后一、webpack1.1简介在最原始的前端开发中，我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的，不仅繁琐，每个文件都需要单独发一次请求

·2022-09-05 11:38

webpack4升级到webpack5的实战经验总结

目录前言terser-webpack-plugin语法报错fork-ts-checker-webpack-plugin语法报错IgnorePlugin报错devtool报错webpack-dev-serverpublicPath报错webpack-dev-serverdisableHostCheck报错移除node.jspolyfill导入json文件语法改变打包报错unknownoption‘-

·2022-08-31 13:17

从零开始搭建react基础开发环境（基于webpack5）

前言最近利用闲暇时间把webpack系统的学习了下，搭建出一个react环境的脚手架，写篇文章总结一下，帮助正在学习webpack小伙伴们，如有写的不对的地方或还有可以优化的地方，望大佬们指出，及时改正。git项目地址：https://github.com/handsomezyw/my-webp

handsomezyw·2022-08-28 17:00

webpack5 splitChunks 配置和用法

前言CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种：1.webpack当中配置的入口文件（entry）是chunk，可以理解为entrychunk2.入口文件

前端开发小司机·2022-08-25 20:16

webpack5 使用svg asset-module

webpack5已经废弃了url-loaderwebpack5自带的asset-module就可以实现以前的功能asset-module整合了原本的url-loader、file-loader、raw-loader

xxsjan·2022-08-21 19:46

解决webpack5打包CSS图片路径不正确问题

问题最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack配置如下：module.exports=merge(common,{target:'browserslist',mode:'production',devtool:false,output:{path:

火星飞鸟·2022-08-19 05:13

webpack学习笔记(webpack5)

webpack,需要进行相对应的练习，所以存在了gitee上，地址如下：https://gitee.com/one-reed-an...

·2022-08-14 17:59

webpack5搭建一个简易的react脚手架项目实践

目录项目初始化安装webpack搭建脚手架目录结构开启本地服务配置css&sass安装react的相关依赖项目添加热更新生产环境打包总结项目初始化首先我们创建一个目录，初始化npm,得到一个package.json文件。mkdirreact-clicdreact-clinpminit-y安装webpack安装webpack和相关依赖。webpack-dev-server是开启开发环境的服务，web

·2022-08-13 12:05

webpack笔记(一)

该笔记参考自尚硅谷2022版Webpack5入门到原理（面试开发一条龙）基本使用webpack是一个静态资源打包工具它会一个或多个文件作为打包入口，将整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件是可以直接在浏览器端运行的

hlz2516·2022-08-05 19:22

webpack学习

webpack为什么需要webpack5个基本概念entry：入口文件output：出口文件Loader：处理css，imgplugins：插件mode：模式功能介绍开发模式：仅编译es6development

西瓜味白桃汽水·2022-08-05 19:16

vue-cli5 + webpack5 + vue2.6x 打包优化

项目的版本是基于@vue/cli5.0.4和[email protected]版本已经内置了webpack5，且很多配置都内置化了，换言之，基础打包无需在vue.config.js中配置了，大大简化了配置过程

·2022-08-01 14:43

webpack5构建一个通用的组件库

为组内实现一个私有通用的组件库，解放重复劳动力，提高效率，让你的代码被更多小伙伴使用。本文是笔者总结的一篇关于构建组件库的一些经验和思考，希望在项目中有所帮助。正文开始...初始化一个基础项目生成基础package.jsonnpminit-y安装项目指定需要的插件npmiwebpackwebpack-clihtml-webpack-plugin@babel/core@babel/cli@babel

·2022-07-29 15:57

梳理 Webpack 知识体系与学习资源推荐

前言关于Webpack之前已经有写过几篇零散的文章:由零开始使用Webpack来搭建React项目WebpackSourcemap回顾升级Webpack5实践如何编写一个WebpackLoader如何编写一个

·2022-07-27 23:16

Webpack 5 集成 ESLint 的方法

本文详细介绍如何在webpack5中集成ESLint。1安装依赖在webpack4中，ESLint是通过loader的方式集成到webpack中的。

格格巫 MMQ!!·2022-07-25 16:28

爆肝总结万字长文笔记webpack5打包资源优化

webpack如何打包资源优化你有了解吗？或者一个经常被问的面试题，首屏加载如何优化，其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求，缓存这些方向来优化，通常在使用脚手架中，成熟的脚手架已经给你做了最大的优化，比如压缩资源，代码的treeshaking等。本文是笔者根据以往经验以及阅读官方文档总结的一篇关于webpack打包方面的长文笔记，希望在项目中有所帮助。正文开始...在

·2022-07-20 12:41

Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

本文摘要：主要讲解在不需要引入额外的loader的条件下运用Webpack5如何高效处理字体图标、图片资源的方法与步骤。

程序员优雅哥·2022-07-18 15:00

Webpack5总结

目录什么是webpack关于webpackwebpack安装使用webpackwebpack配置文件整个过程生成入口htmlwatchmodewebpack-dev-server配置devServer资源模块前言：资源文件的类型有4种loadersloader的配置loader两个属性使用抽离和压缩csscss文件的抽离css文件的压缩babel转码器babel的使用1.安装babel2.配置文件

小白菜00·2022-07-18 07:20

揭秘webpack5模块打包

在上一节中我们初步了解了webpack可以利用内置静态模块类型(assetmoduletype)来处理资源文件，我们所知道的本地服务，资源的压缩，代码分割，在webpack构建的工程中有一个比较显著的特征是，模块化，要么commonjs要么esModule,在开发环境我们都是基于这两种，那么通过webpack打包后，如何让其支持浏览器能正常的加载两种不同的模式呢？接下来我们一起来探讨下webpac

·2022-07-06 10:03

webpack5资源最佳加载方案

react或者vue工程应用，其中我们使用了加载文件，我们在之前处理文件使用file-loader或者url-loader处理，url-loader主要是可以针对图片文件大小进行有选择的base64压缩，在webpack5

·2022-07-03 10:46

webpack4和webpack5打包资源文件配置差异

项目中会有一些资源文件，比如图片资源，字体资源文件等。这些文件在打包的时候需要移动到dist目录webpack4中，打包这些资源文件，需要用到url-loader和file-loader,file-loader把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件(处理图片和字体)url-loader与file-loader类似，区别是用户可以设置一个阈值，大于阈值会交给file-loa

·2022-06-22 11:21

webpack 从零开始配置教程

写这篇文章的时候webpack5刚发布不久，相关插件生态还没跟进升级，所以这篇文章使用的版本为webpack4。

醉逍遥neo·2022-06-21 09:25

webpack5原理

介绍本章节我们主要学习：loader原理自定义常用loaderplugin原理自定义常用pluginLoader原理loader概念帮助webpack将不同类型的文件转换为webpack可识别的模块。loader执行顺序分类pre：前置loadernormal：普通loaderinline：内联loaderpost：后置loader执行顺序4类loader的执行优级为：pre>normal>inl

mildness丶·2022-06-13 21:31

Webpack5相关知识点（二）- 优化（3）- 优化代码运行性能

目录一、CodeSplit（代码分割）1.1多入口1.2多入口提取公共模块1.3按需加载，动态导入1.4单入口1.5统一命名二、Preload/Prefetch2.1简介2.2下载包2.3配置三、NetworkCache3.1文件名生成hash值3.2使用hash值命名出现的问题3.3原因3.4解决四、解决js兼容性问题CoreJS4.1下载包4.2手动全部引入4.3手动按需引入4.4自动按需引入

JHY97·2022-06-13 10:28

Vue3学习之旅-Vue3组件化开发(三)-动态/异步组件-vue3生命周期-组件的v-model

Vue3组件化开发(三)-动态/异步组件-vue3生命周期切换组件案例v-if实现动态组件实现动态组件动态组件的传值Keep-alive认识keep-alivekeep-alive属性缓存组件的生命周期Webpack5

尤雨东·2022-06-13 00:29

使用 Webpack5 创建 Vue3 + TS 项目

加入前端编程面试算法每日一题群作者：suporkahttps://segmentfault.com/a/11900000399343871.前言笔者两年前曾写过一篇文章《Webpack4搭建Vue项目》，后来随着webpack5

前端瓶子君·2022-06-05 07:40

vue@cli4 和 webpack5【实现自适应px-rem转化】

1:项目目录结构：2：项目简单介绍如上图可看出：该项目是由vue@cli4构建的，使用webpack5来打包的，3：想要实现本地编译时和上线后，适配所有pc端步骤1：安装2个插件：autoprefixer

JIseven·2022-06-01 09:27

webpack5 七牛云打包插件，支持vue-cli5构建

·2022-05-23 15:08

options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】

因为最近在体验webpack5发现了个坑点，之前项目示例中的contentBase使用不了了这个属性在新版的webpack-dev-server中被移除了,取而代之的是以下这种替换方案devServer.static

夏暖冬凉·2022-05-22 07:03

基于 vue3 + webpack 5 + sass+ vw 适配方案+axios 封装，从0构建手机端模板脚手架

Webpack5正式发布也有很长长长一段时间了,上手了一段时候后发现真香。webpack5的新特性使得我们在配置上比以往版本更加方便了，构建速度也有了质的飞跃。

进阶的大前端·2022-05-21 17:11

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

因此在v3.5版本中Taro重点对编译系统进行了重构，引入对Webpack5的支持，改善小程序&H5编译时的性能与体验。

·2022-05-20 11:24

webpack5学习

webpack5学习webpack.config.js配置entry入口文件配置，webpack根据该配置文件进行打包module.exports={...

·2022-05-16 11:21

webpack5自定义插件，对插入到html的js文件增加时间戳

针对js文件增加时间戳，避免文件缓存未更新01webpack.config.tsimport*aspathfrom'path';import*aswebpackfrom'webpack';importHelloWorldfrom'./src/plugins/HelloWorld';constHtmlWebpackPlugin=require('html-webpack-plugin');const

·2022-05-14 00:22

如何使用webpack5的模块联邦特性落地微前端

其实这个方案在微前端的架构理念中早已提及，但直到2020年10月Webpack5正式发布之后才被真正落地应用。因为

前端学习栈·2022-05-12 12:26

webpack5-Loader

webpack5(Loader)一、webpack发展现代Web开发"问题"：采用模块开化开发使用新特性性提高开发效率实时监控开发过程使用热更新项目结果打包压缩优化使用webpack实现项目项目工程化1

·2022-05-05 16:39

Webpack5快速入门（一）手把手带你打开前端工程化的大门

目录一、Webpack简介webpack是什么学习Webpack的目的Webpack功能二、Webpack上手一个例子告诉你为什么需要webpackwebpack登场三、Webpack配置文件webpack局部打包自定义入口文件名自定义输出目录通过package.json自定义配置npm与npx的区别通过webpack.config.js配置总结四、Webpack依赖图大家好，这里是小杰，从今天开

小杰学前端·2022-05-03 07:31

webpack5 源码详解 - 编译模块

构建模块上一篇讲了关于webpack初始化做了哪些工作，之后会调用makehook分步骤进行处理模块。Makemakehooks注册了EntryPlugin，它会调用compilation.addEntry处理入口模块//Compiler.jsthis.hooks.make.callAsync(compilation,err=>{//...})//EntryPlugin.jsconst{entry

·2022-04-26 17:19

webpack5 源码详解 - 初始化

Webpack初始化constwebpack=require("webpack");constconfig=require("./webpack.config");constcompiler=webpack(config);compiler.run();虽然大部分情况都在用cli或者dev-server跑webpack,它们能提供很多命令，接收参数，配置不同的npmscript去跑不同的confi

·2022-04-26 16:46

webpack5 源码详解 - 先导

阅读源码先导webpack源码很庞大，并且配置很丰富，阅读起来十分困难。有很多重要的功能模块，概念，独立于webpack外的包等。在阅读源码之前最好先把它们单独整理出来进行简单的介绍，更利于后面的阅读。Compilerwebpack在运行的时候，会传入配置信息，返回实例化的Compiler对象。它在运行环境里是唯一的，所有主流程都由它来控制，比如开始编译，从入口开始处理模块，对于不同模块根据配置进

·2022-04-26 16:43

webpack5持久化缓存

基本介绍持久化缓存是webpack5所带来的非常强大的特性之一。

·2022-04-19 18:59

解决webpack5使用webpack-dev-server热更新，改变内容页面无法自动更新并且报错

当前问题只在webpack5出现，问题出在哪里？

·2022-04-11 10:52

Module Federation在客服工单业务中的最佳实践

ModuleFederation：是模块联邦的意思，在webpack5中流行起来的，也属于一种微前端方案。

·2022-04-08 16:15

webpack5打包原理及应用（静态资源篇）

webpack5打包原理及应用（静态资源篇）file-loader使用首先记得安装file-loader通过创建一个元素，设置其src属性引入图片//新建一个pack-image.js文件如下：functionpackImg

肖迷笛·2022-04-03 13:22

使用webpack5，vue3搭建项目

稳定地enalpro创建Web应用特性Vue3,wepack@5,pnpm,减小node_modules体积组件自动化加载使用Pinia的状态管理UnoCSS-高性能且极具灵活性的即时原子化CSS引擎各种图标集为你所用I18n国际化开箱即用使用新的语法API自动加载-直接使用CompositionAPI无需引入可以自行引入critters的生成关键CSSTypeScript,当然☁️零配置部署Ne

·2022-03-30 17:10

Vue 3 + Vite + SuerMap iClient构建报错Uncaught TypeError utils.inherits is not a function

utils.inheritsisnotafunction报错截图二、问题产生原因Elasticsearch本身就需要这些东西，以前没有问题是因为Webpack4本身就加了node模块的polyfill，而Webpack5

非法小恋·2022-03-17 17:34

「基础搭建」从零开始，基于 Webpack5 搭建一个 Vue-Cli

前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心背景大家平时在进行Vue开发的时候，大部分人都是使用Vue-cli这个现成的Vue脚手架来进行开发的，但是用它用了这么久，你难道不想自己搭一个属于自己的Vue-cli吗？今天我就带大家来搭建一个基本的Vue-cli，也可以让大家对Webpack有更深入的了解！建议大家一定要跟着我一步一步来哦！事先说明：本

·2022-03-15 10:32

umi3.5新特性之提速方案mfsu

一、mfsu是什么mfsu是一种基于webpack5新特性ModuleFederation（模块联邦）的打包提速方案。开启mfsu可以大幅减少启动项目和热更新所需的时间。

程序员超时空·2022-02-25 15:18

webpack5上手指南

前言webpack5正式发布已经大半年了，一直囔囔着要去看看这次更新带来了哪些新特性，但是因为实在是太（xue）忙（bu）了（dong），所以一直没有去实践。

CBDxin·2022-02-22 05:06

推荐频道

Webpack5