Webpack4 配置 Externals

最新推荐文章于 2024-07-05 17:12:56 发布
最新推荐文章于 2024-07-05 17:12:56 发布
阅读量9k 收藏 5
点赞数
分类专栏： 构建工具 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/100555672
版权

Externals 配置项用来告诉 Webpack 要构建的代码中使用了哪些不用被打包的模块，也就是说这些模版是外部环境提供的，Webpack 在打包时可以忽略它们。

1.有些 JavaScript 运行环境可能内置了一些全局变量或者模块，例如在你的 HTML BODY标签里通过以下代码：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

引入 jquery 后，全局变量 jQuery 就会被注入到网页的 JavaScript 运行环境里。就可以直接通过window.$来访问jQuery对象。

2.当运行环境内置了jQuery全局变量（即在body中使用script标签引入了jquery框架），如果同时又使用模块化的方式安装并使用了 jQuery（npm install jquery --save），可能这个时候就会出现重复引用框架的问题。

import $ from 'jQuery';
$('body');

当构建后你会发现输出的 bundle.js 里包含的 jQuery 库的内容，这导致 jQuery 库出现了2次，第一次是body中的script标签加载，第二次是 bundle.js 中加载，浪费加载流量，最好是 bundle.js里不会包含 jQuery 库的内容。那这个时候就用上 Externals 的配置项了

简单的使用案例：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  externals: {
    // 把导入语句里的 LJquery 替换成运行环境里的全局变量 jQuery
    LJquery: 'jQuery'
  },
};

1.模块化安装jQuery

1.新建一个项目

|-- index.html
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testdevserver",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}

1.安装HTTP服务器开发工具：

npm install jquery@3.4.1 --save

npm install webpack-dev-server@3.7.2 --save-dev

2.编写启动服务器脚本：

"dev": "webpack-dev-server" 或者 "dev": "webpack-dev-server --hot --devtool source-map"

3.编写项目打包脚本："build": "webpack --mode production"

webpack.config.js


const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  devServer: {
    // 1.指定服务的ip
    host: "localhost",

    // 2.指定服务的端口
    port: 9000,

    // 3.开发环境进行http的代理
    proxy: {
      // 匹配 url 路径的开头
      '/api': {
        // 1.路劲只要是/api开头的url都代理到下面这个网站。
        // 例如：fetch('/api/xxxx') 会代理到 https://news-at.zhihu.com/api/xxxx
        // 例如：fetch('http://localhost:9000/api/xxxx') 这种写法会代理失败
        target: 'https://news-at.zhihu.com',
        ws: true, // 2.允许代理 websockets 协议
        changeOrigin: true //3.需要虚拟托管的站点要设计为true。建议设为 true，开发时大部分情况都是虚拟托管的站点
      }
    }
  }
};

common.js

// 导入node_modules中的jquery框架
let $ = require('jQuery')
function get(content) {
  // 2.使用jQuery的 ajax 发起网络请求
  $.ajax({
    url:"/api/4/news/latest",
    success:function(result){
       console.log('result=', result)
    },
    error:function(error){
      console.log('error=', error)
    }
  })
}

main.js

// 1.通过 CommonJS 规范导入 get 函数
const get = require('./common.js');
// 2.执行 get 函数
get();

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--1.导入 Webpack 输出的 JavaScript 文件-->
<!-- <script src="../dist/main.js"></script> -->

<!--2.导入 DevServer 输出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

2.启动本地HTTP服务

打开终端，在项目的根目录执行：npm run dev 命令, DevServer 就启动了，这时你会看到控制台有一串日志输出：

PS F:\blog\webpack-study\webpackCode\09-配置-Externals> npm run dev

> testdevserver@1.0.0 dev F:\blog\webpack-study\webpackCode\09-配置-Externals
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\blog\webpack-study\webpackCode\09-配
[./src/main.js] 89 bytes {main} [built]
    + 19 hidden modules
    ....
    ....
i ｢wdm｣: Compiled successfully.

这意味着 DevServer 启动的 HTTP 服务器监听在 http://localhost:9000/ ，DevServer 启动后会一直驻留在后台保持运行，访问这个http://localhost:9000/网址你就能获取项目根目录下的 index.html。 用浏览器打开这个地址你会发现页面引用的 bundle.js文件自动输出到了项目的根目录, 查看网页上的bundle.js会发现jquery框架也被打包到 bundle.js 文件中了。

3.访问 http://localhost:9000 ， 这时你会看到控制台有一串日志输出：

result= {date: "20190905", stories: Array(3), top_stories: Array(5)}
date: "20190905"
stories: (3) [{…}, {…}, {…}]
top_stories: (5) [{…}, {…}, {…}, {…}, {…}]
__proto__: Object

2. 运行环境添加全局变量jQuery

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--1.导入 Webpack 输出的 JavaScript 文件-->
<!-- <script src="../dist/main.js"></script> -->

<!-- 2.导入外部的jquery框架,全局变量 `jQuery` 就会被注入到网页的 JavaScript 运行环境里 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    
<!--3.导入 DevServer 输出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

打开终端，在项目的根目录执行：npm run dev 命令, DevServer 就启动了，这时你会看到控制台有一串日志输出：

PS F:\blog\webpack-study\webpackCode\09-配置-Externals> npm run dev

> testdevserver@1.0.0 dev F:\blog\webpack-study\webpackCode\09-配置-Externals
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\blog\webpack-study\webpackCode\09-配
[./src/main.js] 89 bytes {main} [built]
    + 19 hidden modules
    ....
    ....
i ｢wdm｣: Compiled successfully.

这个时候运行项目还是正常，但是这个时候会导致 jquery库出现了2次，第一次是body中的script标签加载，第二次是 bundle.js 中加载，我们期望最好是 bundle.js里不会包含 jquery 库的内容。那这个时候就用用上 Externals 的配置项了

2.配置-Externals

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
    
  // 指定引用的哪些模块不需要打包到 bundle.js 中  
  externals: {
    // 把导入语句里的 LJquery 替换成运行环境里的全局变量 jQuery
    LJquery: 'jQuery'
  },
    
  devServer: {
    host: "localhost",
    port: 9000,
    proxy: {
      '/api': {xx
        target: 'https://news-at.zhihu.com',
        ws: true, 
        changeOrigin: true
      }
    }
  }
};

commont.js

// 1.导入运行环境中全局变量中的 jQuery 对象
let $ = require('LJquery')

// 2.导入node_modules中的jquery框架
// let $ = require('jQuery')

function get(content) {
  // 2.使用jQuery的 ajax 发起网络请求
  $.ajax({
    url:"/api/4/news/latest",
    success:function(result){
       console.log('result=', result)
    },
    error:function(error){
      console.log('error=', error)
    }
  })
}

// 通过 CommonJS 规范导出 get 函数
module.exports = get;

打开终端，在项目的根目录执行：npm run dev 命令, DevServer 就启动了，这时你会看到控制台有一串日志输出：

PS F:\blog\webpack-study\webpackCode\09-配置-Externalsr> npm run dev

> testdevserver@1.0.0 dev F:\blog\webpack-study\webpackCode\09-配置-Externals
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\blog\webpack-study\webpackCode\09-配
[./src/main.js] 89 bytes {main} [built]
    + 19 hidden modules
    ....
    ....
i ｢wdm｣: Compiled successfully.

这个时候运行项目还是正常，注意这个时候到运行的页面上查看 bundle.js，里不会包含 jquery 库的内容。

结论：

当在webpack.config.js中配置`Externals 项时，Externals 项用来告诉 Webpack 构建时在代码中使用了哪些不用被打包的模块。这样可以防止框架的2次引用问题，也可以实现 Webpack 打包的优化，在使用第三方库时可以直接使用cnd上的资源, 而不用打包到bundle.js中。

源码下载

LiuJun2Son
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4性能优化小结——HMR、source-map、oneOf、babel缓存、 多进程打包、文件缓存、tree shaking、code split、dll、pwa、externals
猛猛的博客
01-16 941
webpack性能优化： 开发环境性能优化 1）优化打包构建速度 —— HMR 2）优化代码调试—— source-map 生产环境性能优化 1）优化打包构建速度——oneOf、babel缓存、 多进程打包 2）优化代码运行的性能——文件缓存、tree shaking、code split、dll、懒加载和预加载、pwa、externals 开发环境配置–优化打包构建的速度 使用HMR（hot module repalcement），热模块替换，作用是一个模块发生改变，只会重新打包这个模块，而不是全部更
webpack 使用外部的库_Webpack4 学习笔记四 暴露全局变量、externals
weixin_39760065的博客
12-19 176
前言此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出webpack 暴露全局变量通过 expose-loader 内联配置在 webpack中配置每个模块通过注入的方式通过cdn的方式引入一个库,并通过 webpack在项目中优化通过 expose-loader 内联配置cnpm i jquery --save 安装 jquery库import $ from 'jquery'conso...
webpack4配置之——23：细说webpack4引入第三方库
kevin的博客
04-04 1922
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里 webpack4 对 JS 文件的引入 在本项目的第19章引入第三方插件库中，已经说过一种对 JS 的引入方法，就是使用 expose-loader，而对非npm 包的引入也在那一章做过介绍，那么引入第三方插件并不是只有那一种办法，这里主要介绍一下其他的引入方法。 其实不用expose-loader也能引入，也能用，只是不够完美，这...
webpack 的externals配置
最新发布
AM1n98的博客
07-05 433
webpack 中的 externals 配置提供了的方式。如果需要引用一个库或文件，但是又不让它被webpack打包（减少打包的时间+减少打包后的bundle文件体积），且不影响在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals来实现。
webpack配置externals汇总
青云码上的博客
07-19 851
webpack@5.88.1 vue@2.7.14 vue-router@3.6.5 element-ui@2.15.13 ant-design-vue@1.7.8 externals用于提取第三方依赖包，使用cdn资源的方式将第三方依赖包引入项目，可以大大减少项目打包体积 配置externals对象有技巧： key 就是 import aaa from 'bbb'中的bbb value 可...
webpack4 超详细配置
衣乌安、随笔
01-14 1433
核心概念  入口 它应该是一个.js 文件，人们会在这个文件中包含.scss 或.css 文件，这样做可能会导致很多意外的错误。有时候你可能会看到一个入口包含了几个.js 文件。虽然有时候你可以这么做，但它通常会增加更多的复杂性。  输出 这是 build/ 或 dist/ 或任意名称的文件夹，用于存放最终的.js 文件。  加载器 它们主要用来编译或转换你的代码，例如 postcss...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
在运行时修改Webpack配置，以将供应商模块添加到属性。 运行将您的供应商模块资产复制到输出路径。 运行将您的供应商模块捆绑包添加到HTML输出中。 安装 npm install --save-dev html-webpack-externals-pl
webpack4config:webpack4配置
03-27
在JavaScript开发中，Webpack 4 配置是至关重要的，因为它能够帮助开发者优化项目结构，提高代码复用，以及实现代码的懒加载等功能。 Webpack 4 的配置文件通常是 `webpack.config.js`，这个文件定义了 Webpack ...
Webpack配置.docx
05-15
记住，Webpack配置是高度可定制的，可以根据项目需求进行调整。随着项目的复杂性增加，你可能需要配置更多插件和loader来处理不同的资源和需求。始终关注Webpack文档和社区的最佳实践，以保持配置的最新性和高效性。
基于webpack 实用配置方法总结
10-19
使用 `externals` 配置可以避免将某些库（如 jQuery）打包进最终文件，而是期望它们在运行时已经在全局环境中可用。在示例中，jQuery 被声明为 `window.jQuery`。 5. **模块处理**： 在 `module` 配置中，`...
配置webpack中externals来减少打包后vendor.js的体积
w13707470416的博客
12-19 1465
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于...
webpack4例子
越思考越清晰
07-26 1236
webpack.config配置 安装 wenpack四个核心概念 打包 演示 Demo1：本地服务 （webpack-dev-server） Demo2： css-loader 、less-loader Demo3：postcss-loader、autoprefixer（自动补充css前缀） Demo4： file-loader （打包html 、字体图标） Demo5： html-we...
webpack：使用externals配置来排除打包后的某个依赖&插件IgnorePlugin的使用
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-25 1323
webpack：使用externals配置来排查打包后的某个依赖
【无标题】记录一次external在vue项目的配置
qq_40794395的博客
03-28 808
【代码】【无标题】记录一次external在vue项目的配置。
webpack优化，预加载与配置externals外部依赖
EATERZ的博客
04-29 228
这样做的好处是，可以在项目中直接使用全局变量或者通过外部引入的方式来使用这些模块，而不需要将它们打包进项目的 bundle 文件中，从而减小 bundle 的体积。具体配置方法是，首先确保在 HTML 文件中引入了 AMap 相关的资源，比如 JavaScript 文件。然后，你可以在项目中直接使用 AMap 对象，而无需通过 import 语句引入。这样配置后，webpack 在打包时会忽略对 AMap 的打包处理，而直接将 AMap 对象视为外部依赖。在上面的 HTML 中，我们通过。
webpack externals
全栈修炼
08-14 2065
webpack externals详解 在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。 几种用法 externals这个参数的传入形式有多种，但是总结而言，实际上就是array > object，reg，这三种形式都可以传入，前者其实是对后者的包含。 array形式 数组内的每一个元素又可以是多种形式，包括object, reg
webpack4.0学习笔记（2）
柒月
03-19 522
优化配置 1、HMR HMR：hot module replacement 热模块替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度。 样式文件：可以使用HMR功能，因为style-loader内部实现了。 JS文件：默认不能使用，需要修改JS代码，添加支持HMR功能的代码。 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。 html文件...
使用webpack中的externals配置项如何配置
02-06
在webpack配置文件中，可以使用以下方式配置externals: ``` module.exports = { externals: { jquery: 'jQuery' } } ``` 上面的配置表示jquery模块将不会被打包进应用程序中，而是在运行时通过全局变量jQuery来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值