webpack优化环境配置 - 27.externals(排除依赖)

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

这里是排除 jQuery的打包。

 

 

1.文件结构

 

 

 

2.代码

 index.js

import $ from 'jquery'

console.log($)

index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="title">hello html</h1>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

</body>
</html>
复制代码

webpack.config.js

复制代码
const {resolve} = require('path')
const HtmlWebpackPlugins = require('html-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: "js/built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugins({
            template: './src/index.html'
        })
    ],
    mode: 'production',
    // externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。
    // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
    externals: {
        // 拒绝 jQuery 被打包进来
        // jquery: 'jQuery|jquery'
        jquery: 'jQuery'
    }
}
复制代码

 

3.打包

$ webpack

 

 

 

 

参考文档：https://webpack.docschina.org/configuration/externals/

end~

posted @   Evengod  阅读(632)  评论(0)  编辑  收藏  举报
相关博文：
·  webpack配置详解 - 30.output
·  webpack优化环境配置 - 23.code split(1)
·  webpack生产环境优化：externals
·  webpack生产环境优化：externals
·  externals拒绝被打包进来
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示