(19/24) webpack实战技巧：推荐使用的第三方类库打包方法

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

这里咱们以第三方框架JQuery为例：

一、在入口文件中引入

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

结果为：

 

 二、在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便可。