直到前面一节,我们已经可以使用webpack的loader、插件在写配置文件等实现css,js,html的压缩转换。 本节主要介绍,怎么在项目打包已经成熟的js,例如jQuery,图表js等。
一、将jQuery 安装到已存在的项目
npm i jquery -D
在index.js 中加入以下代码打印jquery
import $ from 'jquery'
console.log($)
浏览器加载输出的html看下控制台,确实是打印了。
我们在看下这个$是否加载到了window下?console.log(window.$)
npm run dev
浏览器加载下瞅瞅。显示未定义!
二、使用内联方式将jQuery挂载到window
这里又需要了解一个loader expose-loader
同样在项目下 npm i expose-loader -D
然后在index.js 修改下引用jquery的方式
import $ from 'expose-loader?$!jquery' // 将jquery暴露成$
console.log($)
console.log('window:'+ window.$)
执行npm run dev
在浏览器查询效果
三、通过webpack 配置module方式加载jquery
- 1.我们在module.rules属性加入
test:require.resolve('jquery'),
use: [{
loader: 'expose-loader?$'
}]
},
- 2.将index.js修改为原来引用方式
import $ from 'jquery';
console.log($);
console.log('window:'+ window.$);
-
npm run dev
浏览器查看下结果,同样是准确输入了。
四、放弃使用import
,wepack插件注入jquery
webpack 中其实已经存在这个插件,怎么用呢
- 1.配置文件引入webpack模块
let webpack = require('webpack')
- 2.在每个模块注入jQuery对象
new webpack.ProvidePlugin({ // 在每个模块都注入$
'jquery':$
})
-
- 删除上面引入方式
// import $ from 'jquery'
- 4.
npm run dev
浏览器查看下结果。
五、html 外引用jquery
- 1.现在我们注释掉所有webpack 配置
// new webpack.ProvidePlugin({ // 在每个模块都注入$
// $:'jquery'
// })
// {
// test:require.resolve('jquery'),
// use: [{
// loader: 'expose-loader?$'
// }]
// },
- 2.在html 中引入 jquery
- 3.
npm run dev
运行
这种方式存在一个问题,当我们在模块内使用
import $ from 'jquery'
打包输出的index.js文件明显增大
index.c03fc495.js 321 KiB main [emitted] [immutable] main
不使用
index.c5f107a6.js 5.52 KiB main [emitted] [immutable] main
怎么去除?我们选择在配置文件加入一个新属性忽略jquery。
在打包看下,ok了。index.ff3d059d.js 6.12 KiB main [emitted] [immutable] main
上面index.js是加了hash了,只是看上去不一样!
源码下载
创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_others_m
。
进入工程目录,执行 npm install -D
。