首页 > 其他分享 >webpack生产环境优化:externals

webpack生产环境优化:externals

时间:2023-08-28 22:33:50浏览次数:42  
标签:jquery externals js webpack html loader 优化 css

转载请注明 来源:http://www.eword.name/
Author:eword
Email:[email protected]

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>

标签:jquery,externals,js,webpack,html,loader,优化,css
From: https://www.cnblogs.com/eword/p/webpack202308275.html

相关文章

  • webpack生产环境优化:dll
    转载请注明来源:http://www.eword.name/Author:ewordEmail:[email protected]生产环境优化:dlldll动态链接库目的:单独的将多个指定的第三方库打包成一个chunk。意义:将不同的库分割开来,实现代码分割和避免重复打包,在节省打包时间的同时方便按需加载和预加载的实现......
  • 接口查询性能优化-缓存
    查询性能优化缓存种类mybatis一级缓存mybatis二级缓存本地缓存各个节点的数据不同步分布式缓存redis前端h5的缓存本地缓存session缓存mybatis一级缓存一个方法中对同一个sql,查询了多次当在这个方法上加@transactional后续的查......
  • UE4.27, Debug issues, "变量已被优化掉,因而不可用"
    调试时添加监控后,变量未被成功监控,显示"变量已被优化掉,因而不可用" 所使用的解决办法从解决方案配置的下拉菜单中选择DebugGameEditor  感谢阅读,敬请斧正......
  • FX110: 花点时间寻找适合自己的交易风格,优化利润
    交易风格通常与交易者的个性相关。在选择交易策略和制定交易计划之前,对性格和生活方式进行内部反思非常重要 。这是因为使用与你的性格相反的交易风格会导致日后难以坚持你的交易计划。当交易者找到最适合他们的交易风格时,这种风格通常会持续很长时间。在交易中的表现取决于你如何......
  • 深入探讨Android启动优化策略
    在当今激烈竞争的移动应用市场,应用的启动速度直接影响着用户的第一印象和满意度。作为主流的移动操作系统之一,Android的启动优化是开发者必须关注的关键领域。本文将详细介绍一些强大有效的Android启动优化策略,帮助你优化应用的启动过程,为用户创造更出色的体验。冷启动与热启动在着......
  • 从原理聊 JVM(五):JVM 的编译过程和优化手段
    一、前端编译前端编译就是将Java源码文件编译成Class文件的过程,编译过程分为4步:1准备初始化插入式注解处理器(AnnotationProcessingTool)。2解析与填充符号表将源代码的字符流转变为标记(Token)集合,构造出抽象语法树(AST)。抽象语法树每个节点都代表着程序代码中的一个语法结......
  • 批量python爬虫采集性能优化之减少网络延迟的方法
    今天,我们将一起探讨批量爬虫采集的性能优化,特别关注减少网络延迟的方法。网络延迟是爬虫程序中一个常见的性能瓶颈,通过优化网络延迟,我们可以提高爬虫程序的采集速度和效率。让我们一起来看看如何实现这一目标。1.使用异步请求传统的同步请求方式会导致爬虫程序在等待服务器响应时浪......
  • 介绍一下Oracle的操作符优化
    IN:IN写出来的SQL比较容易写及清晰易懂但是性能总是比较低的,从ORACLE执行的步骤来分析用IN的SQL与不用IN的SQL有以下区别:ORACLE试图将IN转换成多个表的连接,如果转换不成功会先执行IN里面的子查询,再查询外层的表记录,如果转换成功,则直接采用多个表的连接方式查询。所以用IN的SQL至......
  • 10条SQL优化技巧
    一、一些常见的SQL实践(1)负向条件查询不能使用索引select*fromorderwherestatus!=0andstauts!=1notin/notexists都不是好习惯可以优化为in查询:select*fromorderwherestatusin(2,3)(2)前导模糊查询不能使用索引select*fromorderwheredesclike‘%XX’而非前导模糊......
  • webpack 概念
    webpack概念本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependencygraph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。在......