首页 web前端 js教程 使用webpack如何提取第三方库

使用webpack如何提取第三方库

Jun 19, 2018 am 09:30 AM
webpack 第三方库

本篇文章主要介绍了详解webpack提取第三方库的正确姿势,常用的提取第三方库的方法有两种,本文详细的介绍了这两种方法,有兴趣的可以了解一下

我们在用webpack打包是时候,常常想单独提取第三方库,把它作为稳定版本的文件,利用浏览缓存减少请求次数。常用的提取第三方库的方法有两种

  1. CommonsChunkPlugin

  2. DLLPlugin

区别:第一种每次打包,都要把第三方库也运行打包一次,第二种方法每次打包只打包项目文件,我们只要引用第一次打包好的第三方压缩文件就行了

CommonsChunkPlugin方法简介

我们拿vue举例

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字, app是入口js文件
 bundle: 'app',
 // vendor就是我们要打包的第三方库最终生成的文件名,数组里是要打包哪些第三方库, 如果不是在node——modules里面,可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: __dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}
登录后复制

然后打包生成的文件引入到html文件里面

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>
登录后复制

DLLPlugin方法简介

首先准备两个文件

  1. webpack.config.js

  2. webpack.dll.config.js

webpack.dll.config.js文件配置如下

const webpack = require(&#39;webpack&#39;)
const library = &#39;[name]_lib&#39;
const path = require(&#39;path&#39;)

module.exports = {
 entry: {
 vendors: [&#39;vue&#39;, &#39;vuex&#39;]
 },

 output: {
 filename: &#39;[name].dll.js&#39;,
 path: &#39;dist/&#39;,
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, &#39;dist/[name]-manifest.json&#39;),
  // This must match the output.library option above
  name: library
 }),
 ],
}
登录后复制

然后webpack.config.js 文件配置如下

const webpack = require(&#39;webpack&#39;)

module.exports = {
 entry: {
 app: &#39;./src/index&#39;
 },
 output: {
 filename: &#39;app.bundle.js&#39;,
 path: &#39;dist/&#39;,
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(&#39;./dist/vendors-manifest.json&#39;)
 })
 ]
}
登录后复制

然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js
登录后复制

html引用方式

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JavaScript模块优化

使用webpack+express如何实现多页站点开发

Webpack框架(掌握核心技术)

使用JS如何实现控制多个滚动条同步滚动

使用vue-cli+webpack如何搭建vue

以上是使用webpack如何提取第三方库的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VUE3入门教程:使用Webpack进行打包和构建 VUE3入门教程:使用Webpack进行打包和构建 Jun 15, 2023 pm 06:17 PM

Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

vite和webpack的区别是什么 vite和webpack的区别是什么 Jan 11, 2023 pm 02:55 PM

区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

如何使用PHP和webpack进行模块化开发 如何使用PHP和webpack进行模块化开发 May 11, 2023 pm 03:52 PM

随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

如何在Go中使用第三方库? 如何在Go中使用第三方库? May 11, 2023 pm 03:30 PM

在Go语言中,使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序,同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库,确保其稳定性和可靠性,是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库,并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式:1.使用goget命令首先

vue webpack可打包哪些文件 vue webpack可打包哪些文件 Dec 20, 2022 pm 07:44 PM

在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

Webpack是什么?详解它是如何工作的? Webpack是什么?详解它是如何工作的? Oct 13, 2022 pm 07:36 PM

Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

Go 语言中的第三方库怎样安装和使用? Go 语言中的第三方库怎样安装和使用? Jun 10, 2023 am 08:15 AM

Go语言中的第三方库怎样安装和使用?Go语言已经成为了现代编程语言中最受欢迎的之一,因为它具有很多非常有用的特性和好处。它是一门非常容易上手的语言,可以用来编写各种各样的程序。与许多其他编程语言类似,Go也有大量的第三方库,它们可以帮助你更高效地编写代码,并且提供了非常多的功能和模块化的组件化结构。本文将介绍如何使用Go的第三方库。查找和选择第三方

webpack怎么将es6转成es5的模块 webpack怎么将es6转成es5的模块 Oct 18, 2022 pm 03:48 PM

配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

See all articles