38 天前 / pingan8787
本文使用的 Webpack-Quickly-Starter 快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节，学习开发简单插件。 ”本文将带你一起开发第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！ 做自己的轮子，让别人用去吧。 完整代码：https://github.com/pingan8787/script-timestamp-webpack-plugin 一、背景介绍本文灵感源自业务中的经验总结，不怕神一样的产品，只怕一根筋的开发。 在项目打包遇到问题：“当项目托管到 CDN 平台，希望实现项目中的 index.js 不被缓存”。
97 天前 / Dunizb
webpack 2.0 开始引入 tree shaking 技术，翻译过来的中文意思就是摇树，它可以在打包时忽略没有用到的代码。 疼！大连这些树快被摇断了 图片来自网络 机制简述 tree shaking 是 rollup 作者首先提出的。这里有一个比喻： 如果把代码打包比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌，然后放入烤箱，最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌，最后直接做出蛋糕。 因此，相比于 排除不使用的代码，tree shaking 其实是找出使用的代码。 Tree shaking 两步走。
106 天前 / clumsy
编者按：本文作者辛昌浩，360奇舞团前端工程师。 写在开头由于业务调整需要，最近接手了公司内部云平台的项目H。看了代码，开发了几个需求，我的第一感觉是，H项目真的是严肃又有历史感！因为它经过了好多位前端同学多年的开发与维护，“前任”小伙伴们在里面花费了大量的时间与精力。这里面涉及到的技术栈也错综复杂，包含了react、webpack、reflux、mobx以及不少手动封装的类库和组件，日积月累，已经包含了十几个子项目，代码体积可见一斑。 发现问题随着时间的迁移和代码体积越来越庞大，开发体验的问题也就随之出现。
126 天前 / Array_Huang
前言在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。 输出产物构建一个库与构建一个一般应用最大的不同点在于构建完成后输出的产物。 一般应用构建完成后会输出： 一个 html 文件一个 js 入口 chunk 、若干子 chunk若干 css 文件若干其它资源，如图片、字体文件等虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。
144 天前 / 张欢
Dennis Gaebel是一名设计技术专家和作家，他热爱开源、CSS架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5的新特性阅读 1689 于2019年2月6日6分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是Webpack。在本文中，我将分享 Webpack 5的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。
172 天前 / 楼外青山
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。 再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家...
173 天前 / 冷星1024
★webpack 团队于北京时间 10 月 12 日凌晨发布了v5.0.0-beta.0版本，本文译自webpack/changelog-v5。此部分主要面向非插件开发的 webpack 使用者。 ”简要说明此版本重点关注以下内容： 我们尝试通过持久化存储优化构建性能。 我们尝试采用更好的算法与 defalut 来改善长效缓存。 我们尝试通过更好的 Tree Shaking 和代码生成来改善 bundle 的大小。 我们尝试清除内部结构中奇怪的代码，同时在不影响 v4 功能基础上实现了新特性。 我们目前尝试通过引入破坏性更改来为新特性做准备，以便于我们能尽可能长期地使用 v5。
200 天前 / Lara
原文链接：css-tricks.com关于 Vue 有一种特别流行的说法：当 React 和 Angular 在一起并生了个孩子，那就是 Vue。我一直都有这种感觉。由于 Vue 的学习曲线很小，所以有那么多人喜欢它并不奇怪。Vue 一直试图让开发人员尽可能多地控制组件及其实现，这就引出了今天的话题。 术语 renderless components 是指不渲染任何内容的组件。本文中，我们将介绍 Vue 如何处理一个组件的渲染。 我们还将了解如何使用 render() 函数来构建无渲染组件。 为了更好地理解这篇文章，你可能想了解一点有关 Vue 的知识。
205 天前 / Mr劳卜
（点击上方公众号，可快速关注） 文/劳卜 阅读本文需要3.1分钟这是劳卜的第32篇原创文章 前言 上篇文章：如何架构一个中后台项目的前端部分（技术选型篇） 当我们的前端项目完成了技术选型阶段后，接下来所要做的便是项目的构建和配置。 虽然说用脚手架能够帮助我们完成基本的目录构建和一些基础配置，但是其他很多实用的功能及特殊配置都需要自己动手实践，根据实际场景进行针对性的设置。 本文主要介绍下项目使用 Vue CLI 3.x 构建后，如何正确的配置 webpack。
221 天前 / 噶牛爱尚
首发于最美前端写文章解读源码系列——create-react-app吴战磊曹操出行 资深前端工程师15 人赞同了该文章create-react-app 是一款优秀的react app脚手架，我花了一些时间把源码做了一个梳理和解读，用注释的方式把主线做了一个引导，大家可以一起学习下： github项目地址：https://github.com/mutong772817723/single-app-cli 该项目已经发布到npm上面，可以用于构建单页面应用 //安装single-app-clinpm install single-app-cli -g//创建一个单页面应用single-app-cli 这期解读了createapp的整个过程，下拉git模板项目的过程这期没有...
235 天前 / 柴方博Felbry
如今的前端开发，有可能会面对复杂的环境，所以工程化思维几乎是专业前端工程师必备的。让同一套代码，在不同的环境中运行时，如何让它以最优的方式（尽可能小、尽可能快）加载和执行，是我们需要考虑的问题。 假设我们需要在开发环境中输出额外的调试信息，而在线上环境中不输出，我们可以定义环境变量： // env.js exportconstisDEV=true; import{isDEV}from'./env.js'; if(isDEV){ console.log('...some information...'); } 在发布上线的时候，我们将isDEV的值设置为false。
324 天前 / 滴滴技术
桔妹导读：随着前端技术的发展，Web 应用变得复杂。为解决开发的复杂度，前端开发也有了模块化的概念。使用 Webpack 完成 模块化的打包构建的方案，可谓尽人皆知。但是利用 Webpack 能做的事情远不止如此。这篇文章从一个独特的角度，利用 Webpack 的特点实现了定制化需求，希望能够对大家有一些启发。 ▍背景 有这样的需求：项目交付的给客户时，需要支持针对客户定制产品的 LOGO、登录界面的背景。 ▍简单分析 手动替换图片文件再编译的方法肯定是无法接受的。 如果你说采用分支的方式来实现这种需求，我觉得也是不太现实。
340 天前 / u528472
准备开发环境- 安装node - 安装webpack - npm init 初始化项目目录结构 先跑一个小demo// src/index.js import _ from 'lodash' function create_div_element () { const div_element = document.createElement('div') div_element.innerHTML = _.join(['kobe', 'cpul'], ' ') return div_element} const div_ele = create_div_element()document.body.appendChild(div_ele) // dist/index.html