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. Websocket是什么？

    一. WebSocket是什么? Websocket是一种网络通信协议,是一个在计算机里专门在[两点]之间传输数据的约定和规范. 二. 为什么存在WebSocket? 因为 HTTP 协议有一个缺陷: ...

  2. Spring校验：@Validated和@Valid区别

    结论: Spring validation验证框架对入参实体进行嵌套验证必须在相应属性(字段)加上@Valid而不是@Validated Spring Validation验证框架对参数的验证机制提供 ...

  3. .Net 5.0导出Execl的两种方式

    项目中经常会用到表格的导入导出今天来简绍一下我所了解的两种方式 1.拼接成表格的简单方式直接导出,服务器上不用安装其他程序 可以直接导出 public async Task<FileResult ...

  4. 总结Unity查找物体的几种方法

    Unity中经常需要查找对象,对应的API也有好几种,各自有不同的适用场合. 1. GameObject.Find 通过名字或路径查找游戏对象. GameObject.Find("GameO ...

  5. （Winform程序带源码） 弹出输入框和获取输入框的值

    弹出输入框和获取输入框的值: private void button1_Click(object sender, EventArgs e) { string returnValue = Microso ...

  6. RecyclerView显示列表

    本次要讲的内容是利用RecyclerView显示Users列表的信息,如下图所示. 首先我们来创建模型User.java package com.example.mytest.User; import ...

  7. 根据已知经纬度导出对应地点的NDVI值

    首先把经纬度和NDVI投影到同一个坐标上,其次把excel的经纬度到出城shp格式 然后执行如下步骤: [工具][spatial analyst 工具][提取分析][多值提取至点]

  8. Constant width to height ratio

    <div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...

  9. 10.4 提高叠加处理速度(2) (harib07d）

    ps:能力有限,若有错误及纰漏欢迎指正.交流 sheet_refreshsub void sheet_refreshsub(struct SHTCTL *ctl, int vx0, int vy0, ...

  10. 自己动手从零写桌面操作系统GrapeOS系列教程——14.屏幕显示原理与文本模式

    学习操作系统原理最好的方法是自己写一个简单的操作系统. 一.屏幕显示原理 电脑显示器屏幕是由很多很小的像素组成的.每个像素就像是一个小灯泡,在屏幕上一排一排的整齐排列着.只要能控制每个像素的颜色就能显 ...