24 天前 / Dunizb
webpack 2.0 开始引入 tree shaking 技术，翻译过来的中文意思就是摇树，它可以在打包时忽略没有用到的代码。 疼！大连这些树快被摇断了 图片来自网络 机制简述 tree shaking 是 rollup 作者首先提出的。这里有一个比喻： 如果把代码打包比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌，然后放入烤箱，最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌，最后直接做出蛋糕。 因此，相比于 排除不使用的代码，tree shaking 其实是找出使用的代码。 Tree shaking 两步......
32 天前 / clumsy
编者按：本文作者辛昌浩，360奇舞团前端工程师。 写在开头由于业务调整需要，最近接手了公司内部云平台的项目H。看了代码，开发了几个需求，我的第一感觉是，H项目真的是严肃又有历史感！因为它经过了好多位前端同学多年的开发与维护，“前任”小伙伴们在里面花费了大量的时间与精力。这里面涉及到的技术栈也错综复杂，包含了react、webpack、reflux、mobx以及不少手动封装的类库和组件，日积月累，已经包含了十几个子项目，代码体积可见一斑。 发现问题随着时间的迁移和代码体积越来越庞大，开发体验的问题也就随之出现。比如，使用webpack-dev-......
70 天前 / 张欢
Dennis Gaebel是一名设计技术专家和作家，他热爱开源、CSS架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5的新特性阅读 1689 于2019年2月6日6分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是Webpack。在本文中，我将分享 Webpack 5的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。 期望是什么在撰写本文时，v5发行版仍处于早期阶段，可能仍会中断，但是主要版本已发生重大......
98 天前 / 楼外青山
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。 再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～ 1. ......
99 天前 / 冷星1024
★webpack 团队于北京时间 10 月 12 日凌晨发布了v5.0.0-beta.0版本，本文译自webpack/changelog-v5。此部分主要面向非插件开发的 webpack 使用者。 ”简要说明此版本重点关注以下内容： 我们尝试通过持久化存储优化构建性能。 我们尝试采用更好的算法与 defalut 来改善长效缓存。 我们尝试通过更好的 Tree Shaking 和代码生成来改善 bundle 的大小。 我们尝试清除内部结构中奇怪的代码，同时在不影响 v4 功能基础上实现了新特性。 我们目前尝试通过引入破坏性更改来为新特性做准备，以便于我们能尽可能长期地使用 v5。 迁移指南=>查阅......
127 天前 / Lara
原文链接：css-tricks.com关于 Vue 有一种特别流行的说法：当 React 和 Angular 在一起并生了个孩子，那就是 Vue。我一直都有这种感觉。由于 Vue 的学习曲线很小，所以有那么多人喜欢它并不奇怪。Vue 一直试图让开发人员尽可能多地控制组件及其实现，这就引出了今天的话题。 术语 renderless components 是指不渲染任何内容的组件。本文中，我们将介绍 Vue 如何处理一个组件的渲染。 我们还将了解如何使用 render() 函数来构建无渲染组件。 为了更好地理解这篇文章，你可能想了解一点有关 Vue 的知识。如果你是新手可以访问网站 Sarah Drasner's......
131 天前 / Mr劳卜
（点击上方公众号，可快速关注） 文/劳卜 阅读本文需要3.1分钟这是劳卜的第32篇原创文章 前言 上篇文章：如何架构一个中后台项目的前端部分（技术选型篇） 当我们的前端项目完成了技术选型阶段后，接下来所要做的便是项目的构建和配置。 虽然说用脚手架能够帮助我们完成基本的目录构建和一些基础配置，但是其他很多实用的功能及特殊配置都需要自己动手实践，根据实际场景进行针对性的设置。 本文主要介绍下项目使用 Vue CLI 3.x 构建后，如何正确的配置 webpack。 webpack 配置 首先你需要知道的是，Vue CLI 3 的 vue-cli-service......
148 天前 / 噶牛爱尚
首发于最美前端写文章解读源码系列——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模板项目的过程这期没有，后续会继......
162 天前 / 柴方博Felbry
如今的前端开发，有可能会面对复杂的环境，所以工程化思维几乎是专业前端工程师必备的。让同一套代码，在不同的环境中运行时，如何让它以最优的方式（尽可能小、尽可能快）加载和执行，是我们需要考虑的问题。 假设我们需要在开发环境中输出额外的调试信息，而在线上环境中不输出，我们可以定义环境变量： // env.js exportconstisDEV=true; import{isDEV}from'./env.js'; if(isDEV){ console.log('...some information...'); } 在发布上线的时候，我们将isDEV的值设置为false。 注意，如果你使用预处理器，比如webpack等打包器，或者......
251 天前 / 滴滴技术
桔妹导读：随着前端技术的发展，Web 应用变得复杂。为解决开发的复杂度，前端开发也有了模块化的概念。使用 Webpack 完成 模块化的打包构建的方案，可谓尽人皆知。但是利用 Webpack 能做的事情远不止如此。这篇文章从一个独特的角度，利用 Webpack 的特点实现了定制化需求，希望能够对大家有一些启发。 ▍背景 有这样的需求：项目交付的给客户时，需要支持针对客户定制产品的 LOGO、登录界面的背景。 ▍简单分析 手动替换图片文件再编译的方法肯定是无法接受的。 如果你说采用分支的方式来实现这种需求，我觉得也是不太现......
266 天前 / 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