6 天前 / Ryan众乐
AlienZHOU快手 前端工程师 246 人赞同了该文章近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。 snowpack 的代码很轻量，本文会从实现原理的角度介绍 snowpack 的特点。同时，带大家一起看看，作为一个以原生 JavaScript 模块化为核心的年轻的构建工具，它是如何实现“老牌”构建工具所提供的那些特性的。 1. 初识 snowpack 近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。
11 天前 / 嘉民617
点击前端充电营，关注我们 前言 上一篇文章我们介绍了 webpack 的安装和使用，没有看过的小伙伴可以从下面链接进入。 webpack 学习教程（二）：起步 2020-06-13 为了方便小伙伴们的学习，每一章我都会把当前 demo 的项目代码放在百度云盘上，想要的小伙伴直接公众号里面回复“webpack 学习教程” + 当前章节，例如：“webpack 学习教程三”即可领取当前章节所涉及的 demo 代码。方便小伙伴们快速上手。 处理图片 图片是网页中最常见的资源之一，我们有必要知道如何用 webpack 来处理。最常见的引入图片的方式有两种：css 背景图片和 img 标签。
30 天前 / 暗夜余晖
介绍 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...
38 天前 / 暗夜余晖
什么是 library？webpack 除了打包应用程序代码，还可以用于打包 JavaScript library。我们在使用 vue 、element 等前端框架（library）时，可以通过 ES6 Modules import 导入使用，也可以通过 script 引入组件库，更或是使用 CommonJS，要支持这么多的使用方式，需要熟悉使用 output.library 和 output.libraryTarget 两个选型的使用。 搭建自己 library 的基础代码假设我们正在编写一个校验字符串是否为空的library，如果输入的字符串为空返回 true，反之返回 false。
52 天前 / Dunizb
webpack 插件用于执行更广泛的任务，例如包优化，资产管理和环境变量注入。 webpack 本身建立在与 webpack 配置相同的插件系统上。根据你使用 Webpack 的方式，有多种使用插件的方法。 事不宜迟，这里有六个很棒的 webpack 插件。 Webpack Bundle Analyzer 通过交互式的、可缩放的树状图来可视化 webpack 输出文件的大小。 该插件将帮助你您执行以下操作： 了解你的包里真正有什么找出哪些模块构成了捆绑软件的最大组成部分查找错误到达的模块优化你的 Webpack 捆绑包安装# NPM npm install --save-dev webpack-bundle-analyzer # Yarn yarn add -D webpac...
122 天前 / pingan8787
本文使用的 Webpack-Quickly-Starter 快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节，学习开发简单插件。 ”本文将带你一起开发第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！ 做自己的轮子，让别人用去吧。 完整代码：https://github.com/pingan8787/script-timestamp-webpack-plugin 一、背景介绍本文灵感源自业务中的经验总结，不怕神一样的产品，只怕一根筋的开发。 在项目打包遇到问题：“当项目托管到 CDN 平台，希望实现项目中的 index.js 不被缓存”。
181 天前 / Dunizb
webpack 2.0 开始引入 tree shaking 技术，翻译过来的中文意思就是摇树，它可以在打包时忽略没有用到的代码。 疼！大连这些树快被摇断了 图片来自网络 机制简述 tree shaking 是 rollup 作者首先提出的。这里有一个比喻： 如果把代码打包比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌，然后放入烤箱，最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌，最后直接做出蛋糕。 因此，相比于 排除不使用的代码，tree shaking 其实是找出使用的代码。 Tree shaking 两步走。
190 天前 / clumsy
编者按：本文作者辛昌浩，360奇舞团前端工程师。 写在开头由于业务调整需要，最近接手了公司内部云平台的项目H。看了代码，开发了几个需求，我的第一感觉是，H项目真的是严肃又有历史感！因为它经过了好多位前端同学多年的开发与维护，“前任”小伙伴们在里面花费了大量的时间与精力。这里面涉及到的技术栈也错综复杂，包含了react、webpack、reflux、mobx以及不少手动封装的类库和组件，日积月累，已经包含了十几个子项目，代码体积可见一斑。 发现问题随着时间的迁移和代码体积越来越庞大，开发体验的问题也就随之出现。
210 天前 / Array_Huang
前言在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。 输出产物构建一个库与构建一个一般应用最大的不同点在于构建完成后输出的产物。 一般应用构建完成后会输出： 一个 html 文件一个 js 入口 chunk 、若干子 chunk若干 css 文件若干其它资源，如图片、字体文件等虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。
228 天前 / 张欢
Dennis Gaebel是一名设计技术专家和作家，他热爱开源、CSS架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5的新特性阅读 1689 于2019年2月6日6分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是Webpack。在本文中，我将分享 Webpack 5的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。
256 天前 / 楼外青山
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。 再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家...
257 天前 / 冷星1024
★webpack 团队于北京时间 10 月 12 日凌晨发布了v5.0.0-beta.0版本，本文译自webpack/changelog-v5。此部分主要面向非插件开发的 webpack 使用者。 ”简要说明此版本重点关注以下内容： 我们尝试通过持久化存储优化构建性能。 我们尝试采用更好的算法与 defalut 来改善长效缓存。 我们尝试通过更好的 Tree Shaking 和代码生成来改善 bundle 的大小。 我们尝试清除内部结构中奇怪的代码，同时在不影响 v4 功能基础上实现了新特性。 我们目前尝试通过引入破坏性更改来为新特性做准备，以便于我们能尽可能长期地使用 v5。
284 天前 / Lara
原文链接：css-tricks.com关于 Vue 有一种特别流行的说法：当 React 和 Angular 在一起并生了个孩子，那就是 Vue。我一直都有这种感觉。由于 Vue 的学习曲线很小，所以有那么多人喜欢它并不奇怪。Vue 一直试图让开发人员尽可能多地控制组件及其实现，这就引出了今天的话题。 术语 renderless components 是指不渲染任何内容的组件。本文中，我们将介绍 Vue 如何处理一个组件的渲染。 我们还将了解如何使用 render() 函数来构建无渲染组件。 为了更好地理解这篇文章，你可能想了解一点有关 Vue 的知识。