const { resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

  entry: resolve(__dirname, 'src/js/index.js'),

  output: {

    filename: 'js/built.js',

    path: resolve(__dirname, 'build')

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: resolve(__dirname, 'src/index.html')

    })

  ],

  mode: 'production',

  externals: {

    // 拒绝jQuery被打包进来

    jquery: '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>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>

</head>

<body>

  <h1 id="title">hello html</h1>

</body>

</html>

30-externals（拒绝某些包被打包进来）的更多相关文章

  1. 【grunt第二弹】30分钟学会使用grunt打包前端代码（02）

    前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...

  2. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  3. 【grunt第一弹】30分钟学会使用grunt打包前端代码

    前言 以现在前端js激增的态势,一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说,文件上百简直是家常便饭,那么这个时候我们的js文件应该怎么处理呢?另外,对于css文件,又该如何处理呢?? ...

  4. 30天轻松学习javaweb_打包web项目成war

    jar -cvf news.war news 打包成 war 包后复制到webapps下,Tomcat将会解压.

  5. 【grunt整合版】 30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  6. 30分钟学会使用grunt打包前端代码【mark】

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  7. 30分钟学会使用grunt打包前端代码

    http://www.cnblogs.com/yexiaochai/p/3603389.html

  8. 【英语】Bingo口语笔记(30) - 表示“拒绝”

  9. webpack--性能优化之打包构建速度和代码调试优化

    前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...

  10. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

随机推荐

  1. Q：oracle19c 如何重建vm_concat函数

    没有wm_concat是因为oracle12c数据库中废弃了wm_concat函数 --–登录dba用户sys权限,为wmsys用户创建可用的wm_concat函数,依次执行以下语句 第一步 定义对象 ...

  2. SQLServer数据库执行时间

    with kk AS( SELECT TOP 2000 total_worker_time/1000 AS [总消耗CPU 时间(ms)],execution_count [运行次数], qs.tot ...

  3. cenos7配置epel源

    1.首先进入/etc/yum.repos.d/目录下,新建一个repo_bak目录,用于保存系统中原来的repo文件 [root@bogon ~]# cd /etc/yum.repos.d/ [roo ...

  4. spring mvc加载顺序

    contextLoaderLister extends ContextLoader 实现 ServletContextListener接口 contextLoaderLister 是一个观察查模式 由 ...

  5. gitlab-ce安装

    # vim /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] name=Gitlab CE Repository baseurl=https://mirrors. ...

  6. 使用vite创建vue3 遇到 process is not defined

    今天新建项目遇到报错,查资料得出,需要在vite.config.js中添加代码如下 import { defineConfig } from 'vite' import vue from '@vite ...

  7. kubernetes集成GPU原理

    这里以Nvidia GPU设备如何在Kubernetes中管理调度为例研究, 工作流程分为以下两个方面: 如何在容器中使用GPU Kubernetes 如何调度GPU 容器中使用GPU 想要在容器中的 ...

  8. 【分布式技术专题】「分布式技术架构」一文带你厘清分布式事务协议及分布式一致性协议的算法原理和核心流程机制（Paxos篇）

    概念简介 Paxos是一种基于消息传递具有高度容错特性的一致性算法,是目前公认的解决分布式一致性问题最有效的算法之一. 发展历史 Paxos算法的发展历史追溯到古希腊,当时有一个名为"Pax ...

  9. 灵感宝盒新增「线上云展会」产品，「直播观赏联动」等你共建丨RTE NG-Lab 双周报

    前言 哈喽各位开发者,「RTE NG-Lab 双周报」如期而至! 近两周,我们更新了一些新的实时互动场景和产品,也举办了代码实验室的第一次线下活动,与大家一起体验了声网最新的 4.0 SDK. 灵感宝 ...

  10. 关于VScode vue3卡顿

    在使用vscode+volar开发vue3项目时,出现代码提示缓慢的问题.通过开启Volar Takeover *模式解决. 以下摘自Vue3官网 https://cn.vuejs.org/guide ...