基于vue2.x的webpack升级与项目搭建指南--基础篇

first thing fitrst 博主声明:绝对不当标题党 有人看最好不过的背景: 十月初对公司产品的前端构建做了一些优化,但还遗留了不少问题(可了解我的前一篇博文:一次webpack小规模优化经历 https://www.cnblogs.com/byur/p/13977657.html),这里 ... »

vue-style-loader源码初步分析

背景: 首先声明一下,我只是个菜鸡,为了解决问题才去看的源码,解决完问题之后也就没有兴趣看其他部分代码了,所以这篇文章是一次很低层次的解读,角度也相当片面,想必会有很多喷点吧。 事情的经过是这样,今年十月底的时候对公司前端产品的构建工具做了一次升级,从webpack1升级到了webpack4,现在已 ... »

webpack入门级 - 从0开始搭建单页项目配置

前言 webpack 作为前端最知名的打包工具,能够把散落的模块打包成一个完整的应用,大多数的知名框架 cli 都是基于 webpack 来编写。这些 cli 为使用者预设好各种处理配置,使用多了就会觉得理所当然,也就不在意是内部是如何配置。如果脱离 cli 开发,可能就无从下手了。 最近在开发一些 ... »

Module Federation原理剖析

【转自团队掘金原文: https://juejin.im/post/6895324456668495880】 为什么需要学习webpack5 module Federation原理呢?因为EMP微前端方案正是基于该革命性功能进行的,具有历史突破意义。通过本文,可以让你深入学习webpack5 mod ... »

深入浅出 webpack 之基础配置篇

前言 前端工程化经历过很多优秀的工具,例如 Grunt、Gulp、webpack、rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webpack 也成为一个优秀前端的必备技能。 由于 webpack 技术栈比较复杂,因此作者打算分两篇文章 ... »

Webpack安装配置及打包详细过程

引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目,本文详细介绍webpack安装配置及打包的详细过程。 Webpack简单 ... »

wepack配置

一、什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。如下图所示: 二、 ... »

Webpack

Webpack 了解Webpack 什么是webpack Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到所有模块依赖,把一些不被浏览器支持的特性(如Sass,TypeScript,ES6、JSX等)转换和打包为合适的格式供浏览器使用。 为什要使用webpack 模块化开发: ... »

webpack5文档解析(下)

声明:所有的文章demo都在我的仓库里 代码分离 代码分离的有点在于: 切割代码,生成不同的打包文件,按需加载这些文件。 每个bundle的体积更小 控制外部资源的加载顺序 常用的方法有: 入口起点:使用入口entry手动分离 防止重复:使用SplitChunksPlugin去重和分离chunk 动 ... »

webpack5文档解析(上)

webpack5 声明:所有的文章demo都在我的仓库里 webpack5 起步 概念 webpack是用于编译JavaScript模块。 一个文件依赖另一个文件,包括静态资源(图片/css等),都会视为依赖关系。 在webpack处理程序时,会在入口处,根据依赖关系进行处理,生成一个依赖关系图,最 ... »

Webpack 原理浅析

作者: 凹凸曼 - 风魔小次郎 背景 Webpack 迭代到4.x版本后,其源码已经十分庞大,对各种开发场景进行了高度抽象,阅读成本也愈发昂贵。但是为了了解其内部的工作原理,让我们尝试从一个最简单的 webpack 配置入手,从工具设计者的角度开发一款低配版的 Webpack。 开发者视角 假设某一 ... »

web前端知识点(webpack篇)

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 四个概 ... »

从零开始使用 Webpack 搭建 Vue3 开发环境

从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-nam ... »

webpack正式、测试环境接口地址本地运行及打包命令配置

声明:本文由w3h5原创,转载请注明出处:《webpack正式、测试环境接口地址本地运行及打包命令配置》 https://www.w3h5.com/post/521.html 为了方便开发,节省接口地址修改维护时间,可以通过 webpack 配置,区分正式、测试环境。 可以方便的通过一个命令或者参数 ... »

vscode 修改标签栏样式为换行全部展示

目前vscode的标签栏是滚动式的,选择查看都不是很方便,于是想要搞成andriod studio那种换行全部展示的标签栏。 因为vscode是electron写的,因此修改css就可以实现。 修改方法 1. 安装Custom CSS and JS Loader插件 2. 添加文件/Users/zm ... »

如何发布一个 npm 包

一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包。之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱。于是开始了学习、汤坑之旅。最终包发布,线上项目成功使用,虽然导致了一次线上故障,但还是快速地fix掉。吃一堑长一智,记录一下整个发布的过程和 ... »