下面说两种方法:

一、

1.引入jQuery,首先安装:

cnpm install --save jquery

2.安装好后,在我们的entry.js中引入:

import $ from 'jquery'

3.引入完成后,我们在entry.js中写入jquery的语法 进行测试:

4.使用 npm run server 效果如下:

二、

1.用plugin引入

如果你觉的上面的方法和webpack没什么关系,只是普通的引入,webpack只是负责了一下打包,这样并没有全局感。那再学习一种在webapck.config.js中配置的方法,这种不需要你在入口文件中引入,而是webpack给你作了全局引入。这个插件就是ProvidePlugin。

ProvidePlugin是一个webpack自带的插件,所以首先我们引入webpack:

const webpack = require('webpack');

2.配置:

new webpack.ProvidePlugin({
$:'jquery'
}),

配置好后,就可以在你的入口文件中使用了,而不用再次引入了。这是一种全局的引入!

前端必学内容:webpack(模块打包器

webpack3 学习内容,点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo

(3).webpack快速入门——配置文件:入口和出口,多入口、多出口配置

(4).webpack快速入门——配置文件:服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩,打包

(7).webpack快速入门——插件配置:HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶,Less文件的打包和分离

(12).webpack快速入门——CSS进阶:SASS文件的打包和分离

(13).webpack快速入门——CSS进阶:自动处理CSS3前缀

(14).webpack快速入门——CSS进阶:消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧:开发和生产并行设置

(18).webpack快速入门——实战技巧:webpack模块化配置

(19).webpack快速入门——实战技巧:优雅打包第三方类库

(20).webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

(21).webpack快速入门——实战技巧:webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

如果我的内容对你有帮助,欢迎打赏

webpack快速入门——实战技巧:优雅打包第三方类库的更多相关文章

  1. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. webpack快速入门——实战技巧:开发和生产并行设置

    package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...

  3. webpack快速入门——实战技巧:webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

  4. webpack快速入门——实战技巧:webpack优化黑技能

    1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...

  5. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  6. webpack快速入门——配置JS压缩,打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  7. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  8. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  9. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

随机推荐

  1. 使用JMX监控Storm的nimbus、supervisor、woker

    可以通过在storm.yaml中增加如下样例的配置, 启动JMX来监控storm的各个角色. 其中对于Worker的监控,因为一个节点上可以有多个work,为了防止端口号重复导致启动失败,所以用动态代 ...

  2. /^\s+|\s+$/g 技术 内容

    alert(" aa dd ".replace(/^\s+|\s+$/g,'')+"方式的"); //正则表达式解释:分成两部分,^\s+ 以空格开头,\s+$ ...

  3. 13.11.20 jquery 核心 siblings() 获得同类(不包含自己)循环所有,

    jquery 核心1.选择器,2. 创建dom 元素 3. jquery 执行时 4. 延迟执行 5. 循环 6. 计算长度.7.8 获得选择器和所在节点 9. 获得下标 10. 元素存放数据  11 ...

  4. 使用java做paypal开发时购买东西支付不成功的原因

    使用java做paypal开发时购买东西支付不成功的原因 没有设置网站习惯设定,登陆自己的paypal账户,在网站习惯设定上填写回调的url路径,这样就可以 支付成功了并且异步修改订单的状态. 支付成 ...

  5. 2018.10.21 codeforces1071A. Cram Time(贪心构造)

    传送门 直接先看最多能够凑出几个. 然后可以得到一个结论就是如果保证所有页数之和是小于等于A+BA+BA+B的一定都对应着一种合法方案. 如何构造? 我们对于第一天的AAA个小时,从大向小选,如果当前 ...

  6. 41 Pain and Pain Management 疼痛与疼痛管理

    Pain and Pain Management 疼痛与疼痛管理 ①Years ago,doctors often said that pain was a normal part of life.I ...

  7. BZOJ 1935 Tree 园丁的烦恼 (树状数组)

    题意:中文题. 析:按x排序,然后用树状数组维护 y 即可. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024000000" ...

  8. Java_得到GET和POST请求URL和参数列表

    一. 获取URL: getRequestURL()(还有个getRequestURI(),只取后面部分) 二. 获取参数列表: 1.getQueryString() 只适用于GET,比如客户端发送ht ...

  9. python按行读取并替换

      fp = open(''test2.txt','w') #打开你要写得文件test2.txt lines = open('test1.txt').readlines() #打开文件,读入每一行 f ...

  10. shell 文本处理——使用awk格式化时间戳

    date -d @时间戳 "+%Y-%m-%d %H:%M:%S" 也可以内置函数 awk '{print strftime("%Y-%m-%d %H:%M:%S&quo ...