腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue学习

专栏作者

155

文章

172945

阅读量

42

订阅数

webpack DLL 动态链接库

webpack react javascript 打包 jquery

项目地址：https://github.com/Ewall1106/webpack-demo 是什么？许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即 DLL 文件，放置于系统中。当我们执行某一个程序时，相应的 DLL 文件就会被调用。一个应用程序可使用多个 DLL 文件，一个 DLL 文件也可能被不同的应用程序使用，这样的 DLL 文件被称为共享 DLL 文件。— 百度百科翻译一下，在 webpack 中的动态链接库就是：由于每次更改了内容 webpack

2020-12-01

2.2K0

Axios 取消重复请求

网络安全 javascript node.js

项目地址：https://github.com/Ewall1106/mall 有什么用？当用户频繁点击在短时间内发送多个 ajax 请求，但是由于网络原因服务器数据无法及时响应返回，这时候，就会有可能造成前端页面数据不匹配的情况。具体场景来说，在用户网速不好的情况下的比如搜索框 onchange 事件的模糊搜索、触底刷新请求列表数据、tab 栏的高频切换等等。再者，这样也浪费服务器资源，也是性能优化的一种必要手段。基本使用官网地址：Axios-CancelToken 官网的基本示例如下。 c

2020-11-12

1.4K0

在 vscode 中 debugger 调试

ide javascript vue.js https

如何使用 Debugger for Chrome 这个插件在 vscode 中进行 debugger 调试。

2020-09-22

2.4K0

axios的封装与请求

node.js javascript api vue.js

引入下axios，然后对axios做下基本的封装。然后就是mock数据的方式说一下，以及在项目中使用的mock方式。 1、安装 axios是什么就不说了吧，你应该已经很熟了，就直接安装吧。 $ npm install axios --save 2、axios封装然后我们简单的在src/utils/request.js中简单的进行了一下axios封装。 import axios from 'axios' import { Toast, Dialog } from 'vant' // 创建一个axi

2020-04-09

1K0

axios的封装、代理转发、数据mock

node.js vue.js webpack 打包 javascript

引入下axios，然后对axios做下基本的封装。然后就是mock数据的方式说一下，以及在项目中使用的mock方式。 1、axios封装 axios是什么就不说了吧，你应该以及很熟了，就直接安装吧。 $ npm install axios --save 然后我们简单的在src/utils/request.js中简单的进行了一下axios封装。对于环境的不同判断，比如开发环境、灰度环境、线上环境等等在@vue/cli3.x中通过新建一个.env.[xxx]的文件来维护-->环境变量和模式 2、数据m

2020-04-02

8970

关于骨架屏与首屏渲染

vue.js 渲染 webpack javascript 打包

参考链接： vue-content-loader page-skeleton-webpack-plugin vue-content-loader vue页面骨架屏

2020-04-02

9930

panda-utils:构建发布一个自己的函数库

webpack npm 打包 javascript

如何构建一个libray库？构建完后怎么发布到npm让大家都可以用到？为什么要构建发布一个自己的函数库？本章就是想谈下这些问题。 webpack从0到1 panda-utils 1、缘起为什么要用webpack写一个自己的函数库？因为有一些工具函数平常是用的比较多，每次起一个新的项目都要用到，同样的工具函数老是去找很麻烦，维护一份自己的函数库，能快速的找到api（毕竟自己写的）且更高效的开发业务，何乐而不为？虽然市场有很多牛逼的库比如loadsh、underscore.js等等，公司也有公共的

2020-04-01

6180

vue-cli3.0与vant的引入

vue.js javascript postcss http 单片机

因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充，新的脚手架生成的项目如何引入vant，简单的说一下。项目相关： panda-vue-template 手把手搭建vue小商城2.0 1、安装如果你是老的脚手架搭建的vue项目，如何引入使用vant可以看看这个-->有赞vant组件库的引入；新的@vue/cli3.x脚手架引入vant也很简单，我们先安装一下： $ npm install vant --save 因为我们的项目中本来是使用sass来作为css的一个预编译器

2020-04-01

1.5K0

18、webpack从0到1-结语

webpack javascript 打包 vue.js react

大概就谈到这里了，回顾总结一下吧。 git仓库：webpack-demo 1、几点总结到这里，基本上我们对于整个webpack是干什么的，可以做些什么事情，一些基本的配置应该是搞清楚了。回

2020-03-27

2990

17、webpack从0到1-构建vue项目

webpack 打包 react javascript vue.js

讲下webpack中的对于vue配置，其实vue官方就提供了一套模板vue-webpack-template，我们学习学习，然后基于当前自己的项目来配置下。 git仓库：webpack-demo 1、处理vue 对于.vue这种文件，webpack肯定是不认识的，所以我们需要相应的loader来处理它，通过查阅文档我们发现需要安装这两个东西： $ npm install vue-loader vue-template-compiler --save-dev 然后安装文档上面的教程，照猫画虎搞一下。这

2020-03-25

5390

14、 webpack从0到1-HMR（热模块更新）

webpack 打包 javascript css https

说下热模块更新这个时常被谈到的问题，工作中也比较常见到、面试中也比较常问到的问题。 git仓库：webpack-demo 1、HMR HMR(Hot Module Replacement)也就是热模块更新，是用来干什么的呢？就是你可以实时的更新某个状态而浏览器不重新刷新。举个具体的例子可能就理解了啊，比如我们现在要把一个div块的颜色从白色改为黑色，最直接方便的办法是怎样？不是去编辑器里面改代码，然后等浏览器refresh这样去看效果；而是直接打开调试着工具，改一下它的颜色就可以看到效果了。使

2020-03-24

4190

12、webpack从0到1-Prefetching/Preloading

webpack 打包缓存 javascript jquery

简单说下webpack中关于Prefetching/Preloading的设置。 git仓库：webpack-demo 1、是什么？首先解决的第一个问题就是prefetching和preloading这两个是个啥子东西？ preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。 Prefetching：设置这个指令，

2020-03-21

7190

11、webpack从0到1-CodeSplitting代码分割

webpack html 打包缓存 javascript

简单说下代码分割。 git仓库：webpack-demo 1、什么是codeSplitting？前面第7章讲output多页面相关的内容时，我们将content.js、header.js、footer.js分别打包为三个文件，然后我们在index.html中用三个script标签引入它们，很明显，上述过程其实就是一种手动式的代码分割。那这样写有什么好处？我们可以给index.html中引入的三个script标签加个async属性，这样的话当我们首次进入页面的时候，就可以异步加载了，比起不做代码分

2020-03-20

6000

9、webpack从0到1-devServer初探

webpack 打包 npm javascript

讲下解决每次修改文件后需要npm run build重复运行命令打包的问题。 git仓库：webpack-demo 1、问题每次修改完文件内容要编译代码时，需要重复手动运行npm run build就是件很麻烦的事情。 webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码，我这里主要说下第一、二种，相关内容webpack教程里都有。 webpack's Watch Mode webpack-dev-server webpack-dev-middleware 2、Watch模式

2020-03-20

6170

8、webpack从0到1-基本的plugins

webpack 打包网站 html javascript

参考链接： webpack-html-webpack-plugin html-webpack-plugin output-management

2020-03-20

3940

7、webpack从0到1-entry、output、sourcemap

打包 webpack c++编程算法 javascript

参考链接： webpack-output webpack-entry webpack-devtool

2020-03-20

5470

5、webpack从0到1-处理css文件

webpack css javascript html php

讲下webpack如何处理css样式文件。 git仓库：webpack-demo 1、新建进入项目中，在src目录下新建一个styles/header.css文件。 webpack-demo/chapter5 ... |- /src |- /assets |- content.js |- footer.js |- header.js |- index.js |- logo.js + |- header.css |- index.ht

2020-03-20

7580

4、webpack从0到1-打包图片资源

webpack 打包 javascript php

上节讲了下webpack的loaders，然后尝试用babel-loader打包了下，想这些基础的loader还有一些需要介绍一下，本章说下关于打包图片资源的loader：file-loader和url-loader。 git仓库：webpack-demo 1、开始老规矩，复制一份上章的目录改名为chapter4。随着找张图片放到src/assets目录下，并同时新建一个logo.js文件。 webpack-demo/chapter4 ... |- /src + |- /asset

2020-03-20

4260

3、webpack从0到1-使用babel打包

babel.js webpack 打包 json javascript

webpack从0到1-使用babel打包讲下webpack中的loaders的概念，然后结合使用babel-loader来对项目中的es6语法做下转换。 git仓库：webpack-demo 1、什么是loaders？先看官网对Loaders的解释：webpack enables use of loaders to preprocess files。简单一点来说就是一个可以帮我们处理文件的东西，比如一个js文件，在webpack打包的时候看到这个js文件就会走我们定义的比如接下来要说的bab

2020-03-20

1.4K0

2、webpack从0到1-模块化规范

webpack 打包 javascript babel.js ecmascript

本章在上章内容的基础上简单扩展一下，先说下模块的规范，有哪些标准，然后谈下webpack的loader怎么用以及使用webpack中的babel-loader简单打包一下。 git仓库：webpack-demo 1、模块化规范上章我们知道webpack是一个模块打包工具，何为模块？一个js文件、css等等都可以称之为模块，ok，假设现在我有a.js、b.js、c.js等等，而且它们之间还要相互引用，咋整？这时候就需要有一套标准来定义该怎么引用啊，它们之间是个啥依赖关系啊之类的，那么大概就有这么几种

2020-03-20

4000

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态