webpack生产环境优化：externals

转载请注明来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生产环境优化：externals

externals配置主要是为了防止某些通过CDN引入的包被打包到输出的bundle中。

一、核心配置

 /*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/
 
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    // webpack配置
    // 入口起点文件
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname nodejs的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            //不同文件必须配置不同loader处理
            // 打包 css 文件的详细loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    // 创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
 
                ],
            },
            //打包less 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less-loader和less
                    'less-loader'
                ]
            },
        ]
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
        new HtmlWebpackPlugin({
            //复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
            template: './src/index.html'
        })
    ],
 
    // 生产环境下会自动压缩js代码
    mode: 'production',
    externals:{
        // 忽略jquery。（库名也就是通过npm安装时的包名）
        jquery:'jquery'
    }
 
};

核心配置

 /*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/
 
    externals:{
        // 忽略jquery。（库名也就是通过npm安装时的包名）
        jquery:'jquery'
    }

jquery不会被webpack打包，需要手动在html中引入。

二、html中手动引入忽略的包

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</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>

 <!-- 手动从cdn引入jquery包 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

posted @ 2023-08-28 22:21 Eword 阅读(222) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· webpack生产环境优化：dll

· webpack开发环境基本配置

· webpack生产环境优化：externals

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

· webpack生产环境优化：dll

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异

公告

成功就像怀孕，
大家都来恭喜你，
可是没人知道
你被操了多少次

─=≡Σ(((つ•̀ω•́)つ

昵称： Eword
园龄： 5年2个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类 (127)

随笔档案 (52)

阅读排行榜

评论排行榜

1. 一文读懂django-restframeword(DRF)(1)

Eword`s Home

鹰的精神,无人扶我上青云,独身也可登昆仑。

webpack生产环境优化：externals

webpack生产环境优化：externals

一、核心配置

二、html中手动引入忽略的包

公告

搜索

常用链接

最新随笔

我的标签

随笔分类 (127)

随笔档案 (52)

阅读排行榜

评论排行榜

最新评论

	/*
	webpack.config.js webpack的配置文件
	路径： ./webpack.config.js
	*/

	// resolve用来拼接绝对路径的方法
	const { resolve } = require('path');
	// 引入打包 html 文件的插件 html-webpack-plugin
	const HtmlWebpackPlugin = require('html-webpack-plugin');

	module.exports = {
	// webpack配置
	// 入口起点文件
	entry: './src/index.js',
	// 输出
	output: {
	// 输出文件名
	filename: 'built.js',
	// 输出路径
	// __dirname nodejs的变量,代表当前文件的目录绝对路径
	path: resolve(__dirname, 'build'),
	},
	// loader的配置
	module: {
	rules: [
	// 详细loader配置
	//不同文件必须配置不同loader处理
	// 打包 css 文件的详细loader配置
	{
	// 匹配哪些文件
	test: /\.css$/,
	// 使用哪些loader进行处理
	use: [
	// use数组中loader执行顺序:从右到左,从下到上依次执行
	// 创建style标签,将js中的样式资源插入进行,添加到head中生效
	'style-loader',
	// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
	'css-loader',

	],
	},
	//打包less 文件的详细loader配置
	{
	//匹配哪些文件
	test: /\.less$/,
	//使用哪些loader进行处理
	use: [
	// use数组中loader执行顺序:从右到左,从下到上依次执行
	//创建style标签,将js中的样式资源插入进行,添加到head中生效
	'style-loader',
	//将css文件变成commonjs模块加载js中,里面内容是样式字符串
	'css-loader',
	//将less文件编译成css文件
	//需要下载less-loader和less
	'less-loader'
	]
	},
	]
	},
	// plugins的配置
	plugins: [
	// 详细的plugins配置
	new HtmlWebpackPlugin({
	//复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
	template: './src/index.html'
	})
	],

	// 生产环境下会自动压缩js代码
	mode: 'production',
	externals:{
	// 忽略jquery。（库名也就是通过npm安装时的包名）
	jquery:'jquery'
	}

	};

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>webpack</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>

	<!-- 手动从cdn引入jquery包 -->
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>