82 天前 / 杨琼璞
Webpack 从 v4 迁移至 v5 问题记录最近，出于工作中对项目优化，有打算将用到的 Webpack 从 4.* 升级至最新版本（Webpack@5.3.0）；鉴于之前就有 Webpack 相关经验，略看了点文档 Webpack 从 v4 升级到 v5 后，就基于 nicelinks-vue-client 项目开始了升级之旅。因为强行升级，过程也较为曲折，有将遇到的一些问题做下梳理记录，希望对之后欲升级 webpack 的朋友，形成参考。 webpack5 构建 vue 编译报错 TypeError: Cannot read property 'properties' of undefined 重新安装依赖 webpack-cli； yarn remove webpack-cliyarn add webpack-cli -D[webpack-...
120 天前 / 九彩拼盘
前言 前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具，而且还发推表示再也回不去 webpack 了， 还引来了 webpack 核心开发人员肖恩的搞笑回复， 那就让我们一起来看一下 vite 到底有啥魔力？ 什么是 Vite？github：https://github.com/vitejs/vite Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 它主要具有以下特点： 快速的冷启动即时的模块热更新真正的按需编译那废话少说，我们先直接来试用一下。
154 天前 / 张欢
Dennis Gaebel 是一名设计技术专家和作家，他热爱开源、CSS 架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5 的新特性阅读 1689 于 2019 年 2 月 6 日 6 分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是 Webpack。在本文中，我将分享 Webpack 5 的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。
174 天前 / 冷星1024
背景—Webpack 迭代到 4.x 版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 开发者视角—假设某一天，我们接到了需求，需要开发一个 react 单页面应用，页面中包含一行文字和一个按钮，需要支持每次点击按钮的时候让文字发生变化。于是我们新建了一个项目，并且在 『根目录』/src 下新建 JS 文件。
178 天前 / 杨琼璞
背景在开发快应用时，少不了构建操作：npm run build（官方 IDE 集成了这些操作，本质上也是调用一样的方法）。这是因为快应用有自己的 DSL 语法，直接这样写出来，在底层是不认识的，需要把业务代码编译成底层识别的样子（感兴趣的同学，可在 build 文件夹查看编译后的代码产物）。整个过程就跟 Vue 和 React 工程的打包一样。等待的过程总是漫长，当项目越来越大的时候，难免还要花上那么点时间。大家都希望这个过程越快越好。 快应用工程是基于 hap-toolkit 编译打包的。而它的功能，部分是基于 Webpack 开发。
182 天前 / 冷星1024
手写 webpack 核心原理 一、核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二、基本准备工作 三、获取模块内容 四、分析模块 五、收集依赖 六、ES6 转成 ES5（AST） 七、递归获取所有依赖 八、处理两个关键字 一、核心打包原理 1.1 打包的主要流程如下需要读到入口文件里面的内容。分析入口文件，递归的去读取模块所依赖的文件内容，生成 AST 语法树。根据 AST 语法树，生成浏览器能够运行的代码 1.2 具体细节获取主模块内容分析模块安装 @babel/parser 包（转 AST）对模块内容进行处理安装 @babel/traverse 包（遍历 AST 收集依赖）安装 @babel/core...
186 天前 / 冷星1024
引言 webpack 的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及 webpack 新版本中的一些新特性来显著提升 webpack 的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 本文演示代码，仓库地址：https://github.com/Jack-cool/webpack4( 欢迎 star 啊) 速度分析 webpack 有时候打包很慢，而我们在项目中可能用了很多的 plugin 和 loader，想知道到底是哪个环节慢，下面这个插件可以计算 plugin 和 loader 的耗时。
196 天前 / pingan8787
学习时间：2020.06.14 学习章节：《Webpack HMR 原理解析》 一、HMR 介绍 Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，它允许在 JavaScript 运行时更新各种模块，而无需完全刷新。 Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh.--《Hot Module Replacement》 当我们修改代码并保存后，Webpack 将对代码重新打包...
205 天前 / Ryan众乐
首发于暴走的 Jser 写文章 webpack 与 rollup 背后的 acornGloriaFE Engineer63 人赞同了该文章现如今 webpack 与 rollup 在整个前端工程化体系中扮演着极其重要的角色，许许多多的工程化解决方案都需要依托这两款模块打包器去实现。 社区中有大量的文章探索了这些打包器的内部原理，尤其是 webpack，却很少有文章探究 webpack 是如何将代码转换成 ast（抽象语法树）的，最多也只是提及 acorn，至于 acorn 的内部实现，很少有人去探究。 如果点开 acorn 的贡献者列表，你会发现一些著名开源项目成员的身影，如：eslint、babel、vue.js。
214 天前 / Ryan众乐
AlienZHOU快手 前端工程师 246 人赞同了该文章近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。 snowpack 的代码很轻量，本文会从实现原理的角度介绍 snowpack 的特点。同时，带大家一起看看，作为一个以原生 JavaScript 模块化为核心的年轻的构建工具，它是如何实现“老牌”构建工具所提供的那些特性的。 1. 初识 snowpack 近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。
218 天前 / 嘉民617
点击前端充电营，关注我们 前言 上一篇文章我们介绍了 webpack 的安装和使用，没有看过的小伙伴可以从下面链接进入。 webpack 学习教程（二）：起步 2020-06-13 为了方便小伙伴们的学习，每一章我都会把当前 demo 的项目代码放在百度云盘上，想要的小伙伴直接公众号里面回复“webpack 学习教程” + 当前章节，例如：“webpack 学习教程三”即可领取当前章节所涉及的 demo 代码。方便小伙伴们快速上手。 处理图片 图片是网页中最常见的资源之一，我们有必要知道如何用 webpack 来处理。最常见的引入图片的方式有两种：css 背景图片和 img 标签。
238 天前 / 暗夜余晖
介绍 HtmlWebpackPlugin 简化了 HTML 文件的创建，它可以帮我们自动生成一个 HTML 文件，并自动引入每次编译后的 webpack bundle 文件。如果你不想使用插件生成的 HTML 文件， 也可以使用 lodash 模板提供你自己的模板。关于 lodash 模板的介绍请参考：https://lodash.com/docs#template 安装npmi--save-devhtml-webpack-pluginyarnadd--devhtml-webpack-plugin 基本使用下面的配置将为你生成一个 HTML5 文件， 打包后的 bundle 文件将插入到 script 标签： varHtmlWebpackPlugin=require('html-webpack-plugin');varpath=require('path');varwebpackConfi...
246 天前 / 暗夜余晖
什么是 library？webpack 除了打包应用程序代码，还可以用于打包 JavaScript library。我们在使用 vue 、element 等前端框架（library）时，可以通过 ES6 Modules import 导入使用，也可以通过 script 引入组件库，更或是使用 CommonJS，要支持这么多的使用方式，需要熟悉使用 output.library 和 output.libraryTarget 两个选型的使用。 搭建自己 library 的基础代码假设我们正在编写一个校验字符串是否为空的library，如果输入的字符串为空返回 true，反之返回 false。
259 天前 / Dunizb
webpack 插件用于执行更广泛的任务，例如包优化，资产管理和环境变量注入。 webpack 本身建立在与 webpack 配置相同的插件系统上。根据你使用 Webpack 的方式，有多种使用插件的方法。 事不宜迟，这里有六个很棒的 webpack 插件。 Webpack Bundle Analyzer 通过交互式的、可缩放的树状图来可视化 webpack 输出文件的大小。 该插件将帮助你您执行以下操作： 了解你的包里真正有什么找出哪些模块构成了捆绑软件的最大组成部分查找错误到达的模块优化你的 Webpack 捆绑包安装# NPM npm install --save-dev webpack-bundle-analyzer # Yarn yarn add -D webpac...
329 天前 / teobler
Entry我们先来看一张图 从这张图可以看到，最上面的文件就是我们整个app的入口，也是这个文件启动了我们整个app，这就是weback的入口，通常这个文件会依赖我们自己app的其他文件，其他文件又会依赖别的第三方库，这些依赖可能是js，也可能是css，当然右边也展示了我们也会依赖app里面的其他文件。 在webpack的config文件中，我们使用entry字段来设置这个入口: 12345module.exports = { ... entry: "./main.js", ...}一句话来总结就是 Entry tells webpack WHAT(files) to load for the browser Output 图片中入口文件下方的是入口文件的依赖...