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

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue学习

专栏作者

155

文章

172871

阅读量

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的封装、代理转发、数据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

18、webpack从0到1-结语

webpack javascript 打包 vue.js react

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

2020-03-27

2990

16、webpack从0到1-tree shaking

ecmascript https webpack 网络安全编程算法

tree shaking，这个还是一个比较重要的一个东西吧，可以大大的优化你的项目。 git仓库：webpack-demo 1、是什么？我们首先从字面意思上来理解一下，tree shaking翻译一下就是摇树罗，摇树的时候就会把不必要的枯枝烂叶给摇下来，同理，到代码中，tree shaking就是把没有用到的代码shaking掉。 tree-shaking只有使用es6的模块化规范才有效，如果你使用commonJs模块化规范是搞不了tree-shaking的，为什么？因为ES6模块是运行时加载

2020-03-25

9350

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

13、webpack从0到1-css代码分割

webpack 打包 css 编程算法 git

前面chapter11介绍了js的代码分割，本章说下css的代码分割如何弄。 git仓库：webpack-demo 1、开始前面chapter11章讲CodeSplitting的时候已经讲过代码分割的概念了，是个什么东西，但那是对js模块做代码分割，这节说下css的代码分割。主要借助的就是一个插件：MiniCssExtractPlugin，还是沿用我们以前的代码，我们先来安装一下。 $ cd chapter13 $ npm install mini-css-extract-plugin --sa

2020-03-24

3760

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

10、webpack从0到1-devServer之数据请求

api node.js webpack 打包 https

本章主要就是一个东西，如何配置webpack的devServer.proxy实现代理转发。这个应该是日常开发事情中必见的内容了。 git仓库：webpack-demo 1、开始既然是请求数据，那么就先安装下axios。 $ cd chapter10 $ npm install axios --save 然后我们在src/index.js文件中使用axios请求一下豆瓣api的接口，拿它电影的前250条数据。 + import axios from "axios"; // ... // 测试devS

2020-03-20

4860

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

3930

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

打包 webpack c++编程算法 javascript

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

2020-03-20

5450

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

1、webpack从0到1-开始

webpack 打包 npm json git

这系列文章就是手把手教你如何从零构建一个webpack项目。目的就是为了了解webpack打包怎么玩的，平常项目开发中所用如ES6语法、less、vue是如何被打包的，是一个比较基础的内容，我也是为了总结一下这方面的知识点，梳理一下个人的知识体系而写下这些文字。工具及版本：vscode、webpack(v4.41.5)、node(v10.16.0) git仓库：webpack-demo 1、什么是webpack？ “webpack is a module bundler.”—webpack官网

2020-03-20

6930

点击加载更多

社区活动

腾讯技术创作狂欢月

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

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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