【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目-编程思维

  最近更新了webpack配置详解,可移步vue-cli webpack详解   对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可。但是,这并不算是一个完整的vue实际应用。在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言,这些

webpack学习笔记(一)安装与试用-编程思维

由于初次接触 webpack(官网),对很多方面都不是很理解,在查找部分资料后记录一下自己的见解(本文实践基于webpack4)。   1. 个人见解 简单来说,webpack就是js的 打包 工具。个人认为比较类似于maven构建,打包java项目。 它能够根据 依赖关系 整合,压缩打包js,通过相关配置还能打包html/css,图片等静态资源文件。(把乱七八糟的文件塞到一块👍) 打包

webpack学习笔记(二)核心概念理解及基础配置-编程思维

上一篇文章 记录了 webpack 初次安装与基础使用,本篇则是记录一下如何使用webpack构建一个比较完整,基础的项目   1. webpack 的4个核心概念 入口(entry):选择项目构建的入口模块,他会根据这个文件起点构建整个项目。 输出(output):构建编译后文件储存的目录,可将构建后的项目输出到指定文件夹。 loader:可以使 webpack 处理非 js 类型的文件,

vuecli 自动转换小文件为 base64 格式,如何关闭?-编程思维

1. 问题 最近在写 vue 项目时,发现稍微小一点的静态资源,例如字体文件, 图片都被自动转换为 base64 格式了。 在网上搜索时基本都是去配置 url-loader ,配置后提示:Can't resolve 'url-loader'。看了依赖文件中并没有 url-loader 这个库。 2.原因 目前最新的 vue-cli 版本是基于 webpack5 的,在 webpack4 的时

前端优化之路:构建、打包速度提升-编程思维

【前言】 《闻香识女人》中有句经典台词,“有些人一分钟过尽一生”,多少人在等待中浪费了生命的美好。同样,如果一个项目构建、热更新、打包速度过慢,中途需大把时间去等待,那么不免让人抓狂。   【效果展示】 优化前,构建速度  整整126秒,两分多钟过去后,项目才启动成功     优化后,构建速度 21秒运行完毕,仅用以前16%的时间,节约80%以上,过程不再枯燥、冗长。     优化前,打包速

前端优化之路:打包文件拆包、增加哈希值-编程思维

  【前言】   前面对项目打包做了优化处理,但是还不够完美,有两点可继续优化   1.  生成的chunk-vendors文件过大,压缩后仍然超过1M   2.  开发、测试环境生成的js文件,未带哈希值   问题1:如果在弱网环境下,会造成首次白屏时间过长 问题2:容易产生同名文件,造成浏览器缓存 出于以上两点考虑,故而需继续对项目优化处理,以求精益求精   优化前,dist里的js文件列

当我尝试着把老项目 webpack 迁移到 vite 时,发现并没有这么香-编程思维

背景 最近,就 前端开发过程中的痛点及可优化项 做了一次收集。 其中,构建耗时、项目编译速度慢 的字眼出现了好几次。 随着业务的快速发展,我们很多项目的体积也快速膨胀。随之而来的, 就是打包变慢等问题。 提升研发效率,是技术人永恒的追求。 我们项目也有启动慢的问题,同事也提到过几次。刚好我之前也做过类似的探索和优化, 于是就借这个机会,改造一下项目, 解决启动耗时的问题。 于昨天下午, 成功嵌

webpack相关知识点-编程思维

webpack的优点 webpack从配置的入口出发,可以打包所有前端资源,同时可以配置多种loader来处理不同类型文件的转换,并且可以配置plugin来扩展模块打包流程,满足更多构建中特殊的需求,开发过程中还可以使用HMR提升本地开发效率和体验,生产环境中可以利用代码压缩和代码分割来提升前端加载性能,总之就是既可以提升开发效率,又可以提升应用性能。 webpack中loader和plugin

webpack.devserver 配置项如何使用?附devserver完整示例-编程思维

前言: 我们在平常本地开发时,可能经常需要与后端进行联调,或者调用一些api,但是由于浏览器跨域的限制、开发与生产环境的差异、http与https等问题经常让联调的过程不够顺畅。所以本文介绍一下webpack的devServer中的proxy配置项。接下来让我们先看一下这个配置项的基本使用: 基本使用 基本代理配置:如果你有一个在localhost:3000上的后端,你可以通过简单的配置

webpack的splitchunks和cachegroups-编程思维

splitChunks 的 chunks 用途说明 chunks: "all", // 必须三选一: "initial"(同步包) | "all"(推荐,同步或异步包) | "async" (默认就是async,异步包) chunks 指的是 分离包的作用范围 initial 则只分离初始包,例如 入口包,意思是,入口包引入的包将被分离,而不是指入口包本身 async 异步包,import('.

vue.js学习之入门实例-编程思维

之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue、vue-cli、vue-router、webpack等。 首先看下实现的效果:   源码下载戳这里:源码 1、使用vue-cli脚手架创建项目 vue init webpack tll 备注:使用webpack模板创建名为tll的项目,这里会按照提示输

webpack学习之入门实例-编程思维

webpack:前端打包神器,目前活跃度甚至超过了gulp、grunt等,使用webpack打包,简单快速,下面记录下webpack环境搭建以及基本使用: 1、首先新建一个空白目录,用于项目根目录,比如我这里是simple_project 2、cmd窗口全局安装webpack: npm install webpack -g //cnpm install webpack -g 3、进

【nodejs】命令-编程思维

一、webpack命令 在package.json的scripts中,本地开发的启动命令,通常这么配置就够了 "dev": "webpack-dev-server", 这样子它会自动读取名为根目录下webpack.config.js的文件中的配置。 如果我们要指定某个路径下的某个文件,比如我要指定读取build目录下的webpack.dev.conf.js,那么 "dev": "webpa

webpack性能优化 splitchunksplugin的使用详解-编程思维

使用前景 在vue、react等使用webpack为项目打包工具的前端项目,在开发过程中,随着项目功能的逐渐增加,项目整体体积的不断增加,打包的时长和打包后部署的项目体积也在不停的增长,这样可能会导致一下两个问题: 使用自动化部署工具Jenkins部署时,Jenkins因内存不足而崩溃 打包产物过大,用户的首屏加载缓慢,网页响应用户操作时延较长,令用户感觉卡顿,整体体验不佳 解决方式 代码分

webpack5 devserver浏览器打开显示 can not get-编程思维

webpack5中通过使用 webpack-dev-server 插件,配置 devServer 来浏览器启动页面,对于单页面,我们可以直接配置打开首页,多页面,可以配置打开一个文件目录,选择各个页面的目录 当我们配置好 webpack 后,执行 npm run dev,浏览器打开经常会看到显示  can not get,即无法匹配服务器匹配的目录 这时我们在 devServer 下配置 sta

从零配置webpack项目-编程思维

webpack.config.js基本配置 webpack.config.js是webpack的配置文件,在此文件中对项目入口,项目的输出,loader,插件以及环境等进行简单的配置 首先来对webpack的五个核心概念进行介绍 entry:入口,说明了项目以哪个文件为入口开始对项目进行打包,分析构建内部依赖图, main:单个入口语法 可以简写为 entry:'' pageOne

uncaught error: cannot find module 'strip-ansi'-编程思维

       我的项目是typescript开发语言,原本我只写了".ts",导致上面运行yarn dev编译报错,页面报错。加上".js"后成功 报错原因:在webpack.config.js配置中 resolve字段下的extensions配置错误 module.exports = { // ... resolve: { extensions: ['.ts, '.

webpack中引用jquery的四种方式-编程思维

import webpack中是根据一个入口文件开始收集依赖。 import $ from 'jquery'  但是一个项目中通常有很多个地方都用到了jQuery,每个模块都要这样的一行代码 那么如何解决这个问题了。  webpack插件 ProvidePlugin  webpack内部有个插件,可以帮助到我们,(webpack自己的插件),用了这个插件,我们所有文件都不用再手动的导入了。