资源 React-16.8.*react-router-dom-4.3.*TypeScript-3.5.*webpack-4.*eslint-5.16.*项目目录├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category //项目分类 │ │ ├── demo1 │ │ ├── demo2 │ │ └── ... │ ├─...
前言昨天重新把我们公司的引流页做了二重封装，遇到一个问题。webpack 切割的时候如何加个可以跟随文件名变化的前缀。 效果图解决路径 GG大法+ webpack官方文档官方文档还真的有提供对应的知识，说明如下大体就是就是 [request] 可以拿到实际解析的文件名，来取代默认的索引递增的方式。 代码实现对应的API官方文档：【magic-comments】// 注册 const IntroRegister = categoryName => {return () => import(/* webpackChunkName:"...
背景在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么我们如何做呢？ 步骤1.引入CDN链接在项目的 index.html 中，常规方式引入 CDN 链接，此处以 vue 和 element-ui 为例： <body><div id="app">...
1. SPASPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能优点: 不需要跳转页面,局部更新页面内容前端组件化缺点: 首屏加载慢(第一次访问慢,按需加载)开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)不利于SEO搜索引擎优化(使用服务端渲染)2. 前端路由:根据不用的URL标识符渲染不同的组件(不同的网页内容)路由实现原理:hash哈希(锚点) 通过hashchange监听URL标识符改变,显...
代码均放在 git仓库 Webpack 4给我们带来了一些改变。包括更快的打包速度，引入了SplitChunksPlugin插件来取代（之前版本里的）CommonsChunksPlugin插件。在这篇文章中，你将学习如何分割你的输出代码，从而提升我们应用的性能。 SplitChunks插件( webpack 4.x以前使用CommonsChunkPlugin )允许我们将公共依赖项提取到现有的 entry chunk 或全新的代码块中。 代码分割的理念 首先搞明白： webpack里的代码分割是个什么鬼？ 它允许你...
最近有一个项目，还是使用的传统 MVC 模式开发，完全基于jQuery，使用了基于java模板引擎velocity，页面中嵌入了大量java语法，使得前后端分离不彻底，工程打包上线苦不堪言，为实现后端为服务化，前端也得彻底从后端中分离出来。 方案: webpack4 + ejs webpack 打包所有的 资源打包所以的 脚本打包所以的 图片打包所以的 样式打包所以的 表ejs高效的 JavaScript 模板引擎，代替 velocity webpack 配置基本插件 @babel/core，@babe...
之前为公司搭建了套webpack多页面应用脚手架，起初用得挺爽，资源整合打包，组件化开发，各种组件复用，需要什么就拿什么，后来入口有50个页面了，慢慢的发现了每次按保存后的热加载等待时间越来越长，需要等待10几秒，实在太影响开发效率，于是我查找原因。 观察发现，每次到热加载时会在emitting HtmlWebpackPlugin这停留很久。于是我想知道它到底停留了多长时间呢？在package.json内加入--profile，它会告诉你编译过程中哪些步骤...
webpack是一个现代JavaScript应用程序的静态模块打包器，借用官网的一张图，它能够将一些预处理语言，js的最新语法转换成浏览器识别的内容。现在一般的前端框架都有比较成熟的脚手架，大多数对webpack都有个较好的集成，我们只需要敲一些简单的命令就能生成一个通用的项目模板，比较便捷，但是要知其然知其所以然，所以今天就尝试着从零开始搭建一个前端开发环境。项目源码： https://github.com/gerryli0214/webpack-demo webpack...
安装 Webpack安装： # 本地安装 $ npm install --save-dev webpack webpack-cli# 全局安装 $ npm install -g webpack webpack-cli在项目根目录下新建一个配置文件—— webpack.config.js 文件： const path = require(path);module.exports = {mode: none,entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist)} }在 src 目录下新建 a.js 文件： export const isNull = val => val === null ex...
前言目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。那么在webpack中如何使用babel呢？这是本篇文章要探讨的问题。写这篇文章的目的还在于最新webpack版本的一些操作方式已经变化、babel也在不断更新，以往的一...
现在的 webpack 不再是入门噩梦,过去 webpack 最让人心塞的莫过于配置文件，而 webpack4 诞生随之而来的是无配置 webpack。 使用 webpack4，至少只需要安装 webpack 和 webpack cli。所以大家完全可以自己打一个最简单的包，还能修改插件对比前后的区别。 npm i webpack webpack-cli -D 安装后，因为 webpack4 会默认 src 为入口目录，所以先新建 src/index.js。 // src/index.js import { sth } from ./shouldImport import other...
项目现状 项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了 使用webpack-bundle-analyzer分析了一下各个文件所占用的比例：整个项目文件分布大体清晰了，现在开始优化走起！ 优化思路 根据 wba的显示，第三方插件是大部头，包括three.js echart组件和elementUI组件。 three.js优化空间不大,主要关注另外两个上面。 echarts 根据我的项...
一 背景最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。二 插件介绍打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到head标签里。另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output属性指定。然...
一、前言The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.DllPlugin 结合 DllRefrencePlugin 插件的运用，对将要产出的bundle文件进行拆解打包，可以很彻底地加快webpack的打包速度，从而在开发过程中极大地缩减构建时间。 二、构建效果 结论先行： 使用 DllPlugin 和 DllRefrencePlugin 进行构建，可以缩减50%～70%的构建时间。 参考Demo： ...
electron是一两年前挺火的一个框架 本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 （当然听说mac上也可以用electron，不过没试过） （没错我还在用windows，不是mac也不是linux，我是个lowB） 团队主要的技术栈是react，所以考虑用react开发，方便维护。 PS.由于项目是大半年前做的，所以一些细节可能记忆有误请见谅 几个重点： 1.想要能调试必须使用we...