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. 【搭建】【转】PPTP

    https://blog.51cto.com/10802692/2177227?SOURCE=DRA

  2. 关于UPD章节学习的一些感想

    课程看到了UDP, 首先了解UDP的原理模型. 服务端,首先是实例QUdpSocket,也就是UDP套接字,然后,需要绑定.绑定一个任意IP地址,分为IPV4和IPV6.自行选择课程中讲解时绑定的是I ...

  3. Redis学习（黑马篇）

    1.redis是一个键值型数据库即在Redis内存的数据都是键值对的格式,如: 2.NOSQL非关系型数据库与MySQL关系型数据库对比: 非结构化类型分为:键值类型(Redis)(value支持多种 ...

  4. curl解决乱码

    mb_convert_encoding($str, 'UTF-8', 'UTF-8,GBK,GB2312,BIG5');

  5. NX二次开发获取NX主程序路径

    //头文件 #include <Windows.h> #include <iostream> #include <NXOpen/ListingWindow.hxx> ...

  6. 【MSSQL】远程打开对象

    opendatasource https://docs.microsoft.com/zh-cn/sql/t-sql/functions/opendatasource-transact-sql?view ...

  7. 继承和组合关系: is a & has a

    继承:is-a 比如 营销人员类 和 开发人员类 都继承自 职工类,营销人员 is-a 职工.组合:has-a 比如 汽车类 包含一个 发动机类 的对象,汽车 has-a 发动机.

  8. VS工具显示小技巧，显示内联参数

    工具---选项---文本编辑器---C#---高级---在显示内联参数名称提示前面打勾. 则可以在代码中看到参数提示信息.

  9. Why WebRTC｜“浅入深出”的工作原理详解

    前言 近几年实时音视频通信应用呈现出了大爆发的趋势.在这些实时通信技术的背后,有一项不得不提的技术--WebRTC. 今年 1 月,WebRTC 被 W3C 和 IETF 发布为正式标准.据调研机构 ...

  10. 2021年9月学科能力综合测试（TACA）试题解答 Mathemaitca练习

    各个都是人形计算器???? 目录 试题地址 1 签到 2 3 签到 4 5 6 7 8 9 10 11 你让我猜我肯定这么猜 12 13 试题地址 http://www.mxqe.com/gzsnj/ ...