在日常的开发中,总避免不了引入第三方的框架,比如常用的JQuery,此节我们来学习一下如何优雅并正确的用webpack引入第三方库。

这里我们以第三方框架JQuery为例:

1、在入口文件中引入

1.1  安装JQuery

npm install --save jquery

由于Jquery最终要在生产环境中使用,所以要使用–save进行安装。

1.2 在入口文件(entry.js)中引入

安装好后,我们使用import引入到entry.js文件中。

import $ from 'jquery';

因为jquery包是直接安装到node_modules,这里可以直接通过包名就可以引入成功。(系统会自动为我们查找)

1.3 使用三方框架(jquery)

引入好后我们就可以在entry.js里使用jquery,进行测试引入是否成功:

$('#title').html('Hello Jquery');

1.4 打包+启动服务

jquery代码写完之后,我们打包,然后启动服务,我们可以看到代码顺利运行,这说明我们引用的JQuery库成功了。

打包:

npm run dev

启动服务:

npm run server

结果为:

2、在webpack.config.js文件的plugins属性中引入

这种不需要你在入口文件中引入,而是webpack给你作了全局引入。这里使用的插件是ProvidePlugin。

ProvidePlugin是一个webpack自带的插件,因为ProvidePlugin是webpack自带的插件,所以要先再webpack.config.js中引入webpack。

2.1 引入

webpack.config.js:

const  webpack = require('webpack');

注意:在webpack.config.js里引入必须使用require,否则会报错的。

2.1 配置plugins模块

plugins:[
new webpack.ProvidePlugin({
$:"jquery"
})
],

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

2.3 使用三方框架

此时的入口文件变为:

2.4 打包+启动服务

该步骤与1.4相同,参考上述1.4即可。

(19/24) webpack实战技巧:推荐使用的第三方类库打包方法的更多相关文章

  1. (21/24) webpack实战技巧:webpack对三方类库的优化操作

    1.优化第一步--选用引入方式 在前面的学习中我们对于如何引入第三方类库(Jquery)推荐了两种方式,第一种是import引入的方式,第二种是ProvidePlugin插件.那两种引入方法有什么区别 ...

  2. (23/24) webpack实战技巧:如何在webpack环境中使用Json

    在webpack1或者webpack2版本中,若想在webpack环境中加载Json文件,则需要加载一个json-loader的loader进来的.但是在webpack3.x版本中,则不需要在另外引入 ...

  3. (22/24) webpack实战技巧:静态资源集中输出

    工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...

  4. (20/24) webpack实战技巧:watch实现热打包和添加代码备注

    在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要实时进行打包以确保团队间能进行联调或者进 ...

  5. (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

    1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...

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

    搞个小例子便于学习: 具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块. 1.在根目录新建一个config文件,然后新建webpac ...

  7. Webpack抽离第三方类库以及common解决方案

    前端构建场景有两种,一种是单页面构建,另一种是多入口构建多页面应用程序(我视野比较小,目前就知道这两种),下面我们针对这两种场景总结了几种抽离第三方类库以及公共文件的解决方案. 如果有哪些地方优化不周 ...

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

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

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

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

随机推荐

  1. Spring DI

    一.   Spring DI 依赖注入 利用spring IOC实例化了对象,而DI将实例化的对象注入到需要对象的地方,完成初始化任务. 对象由spring创建,之后再由spring给属性赋值 spr ...

  2. Spring MVC 学习)——控制器与@RequestMapping详解

    Spring MVC 学习总结(二)——控制器定义与@RequestMapping详解 一.控制器定义 控制器提供访问应用程序的行为,通常通过服务接口定义或注解定义两种方法实现. 控制器解析用户的请求 ...

  3. 迭代器Iterator的底层实现原理

    第一步:没有接口的迭代器简单实现原理 package com.bjsxt.xiaofei; /** * 迭代器底层原理 * 方法: * hasNext() * next() * remove() * ...

  4. MySQL--禁用账号和设置账号有效期

    ======================================================================= MySQL5.5/5.6版本 在MySQL 5.7 版本 ...

  5. Jupyter和IPython

    Jupyter内核就是IPython(Interactive Python):你看到的按tab键能够自动提示/补齐都是IPython实现的. IPython其实不只限于IPython,其实你看到的ID ...

  6. Hyper-V 虚拟机连网

    参考:http://www.cnblogs.com/chenxizhang/p/3188005.html(个人推荐) 参考:http://blog.csdn.net/elvis_0123/articl ...

  7. nginx搭建负载均衡

    负载均衡:针对web负载均衡简单的说就是将请求通过负债均衡软件或者负载均衡器将流量分摊到其它服务器. 负载均衡的分类如下图: 今天分享一下nginx实现负载均衡的实现,操作很简单就是利用了nginx的 ...

  8. 关于新建android项目时 appcompat_v7报错问题的一点总结

    说下我的解决方案: 1.确保 appcompat项目的 target版本 低于 实际项目的android版本(就像.net中 低版本的 framewrok项目不能引用高版本framework项目一样) ...

  9. web中显示中文名称的图片,可以这样配置filter

    com.cy.filter.UrlFilter: package com.cy.filter; import java.io.IOException; import java.net.URLDecod ...

  10. 接口测试3-2csv格式

    csv文件数据 IntellJ IDEA打开终端:view-tool windows-terminal,可以在终端中查看文件路径 阿里 马云 京东 刘强东 京东 马化腾 #java //读取csv文件 ...