25 天前 / 楼外青山
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。 再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～ 1. ......
26 天前 / 冷星1024
★webpack 团队于北京时间 10 月 12 日凌晨发布了v5.0.0-beta.0版本，本文译自webpack/changelog-v5。此部分主要面向非插件开发的 webpack 使用者。 ”简要说明此版本重点关注以下内容： 我们尝试通过持久化存储优化构建性能。 我们尝试采用更好的算法与 defalut 来改善长效缓存。 我们尝试通过更好的 Tree Shaking 和代码生成来改善 bundle 的大小。 我们尝试清除内部结构中奇怪的代码，同时在不影响 v4 功能基础上实现了新特性。 我们目前尝试通过引入破坏性更改来为新特性做准备，以便于我们能尽可能长期地使用 v5。 迁移指南=>查阅......
54 天前 / Lara
原文链接：css-tricks.com关于 Vue 有一种特别流行的说法：当 React 和 Angular 在一起并生了个孩子，那就是 Vue。我一直都有这种感觉。由于 Vue 的学习曲线很小，所以有那么多人喜欢它并不奇怪。Vue 一直试图让开发人员尽可能多地控制组件及其实现，这就引出了今天的话题。 术语 renderless components 是指不渲染任何内容的组件。本文中，我们将介绍 Vue 如何处理一个组件的渲染。 我们还将了解如何使用 render() 函数来构建无渲染组件。 为了更好地理解这篇文章，你可能想了解一点有关 Vue 的知识。如果你是新手可以访问网站 Sarah Drasner's......
58 天前 / Mr劳卜
（点击上方公众号，可快速关注） 文/劳卜 阅读本文需要3.1分钟这是劳卜的第32篇原创文章 前言 上篇文章：如何架构一个中后台项目的前端部分（技术选型篇） 当我们的前端项目完成了技术选型阶段后，接下来所要做的便是项目的构建和配置。 虽然说用脚手架能够帮助我们完成基本的目录构建和一些基础配置，但是其他很多实用的功能及特殊配置都需要自己动手实践，根据实际场景进行针对性的设置。 本文主要介绍下项目使用 Vue CLI 3.x 构建后，如何正确的配置 webpack。 webpack 配置 首先你需要知道的是，Vue CLI 3 的 vue-cli-service......
74 天前 / 噶牛爱尚
首发于最美前端写文章解读源码系列——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模板项目的过程这期没有，后续会继......
88 天前 / 柴方博Felbry
如今的前端开发，有可能会面对复杂的环境，所以工程化思维几乎是专业前端工程师必备的。让同一套代码，在不同的环境中运行时，如何让它以最优的方式（尽可能小、尽可能快）加载和执行，是我们需要考虑的问题。 假设我们需要在开发环境中输出额外的调试信息，而在线上环境中不输出，我们可以定义环境变量： // env.js exportconstisDEV=true; import{isDEV}from'./env.js'; if(isDEV){ console.log('...some information...'); } 在发布上线的时候，我们将isDEV的值设置为false。 注意，如果你使用预处理器，比如webpack等打包器，或者......
178 天前 / 滴滴技术
桔妹导读：随着前端技术的发展，Web 应用变得复杂。为解决开发的复杂度，前端开发也有了模块化的概念。使用 Webpack 完成 模块化的打包构建的方案，可谓尽人皆知。但是利用 Webpack 能做的事情远不止如此。这篇文章从一个独特的角度，利用 Webpack 的特点实现了定制化需求，希望能够对大家有一些启发。 ▍背景 有这样的需求：项目交付的给客户时，需要支持针对客户定制产品的 LOGO、登录界面的背景。 ▍简单分析 手动替换图片文件再编译的方法肯定是无法接受的。 如果你说采用分支的方式来实现这种需求，我觉得也是不太现......
193 天前 / 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