1.5 webpack 之 jQuery 使用配置附源码

直到前面一节，我们已经可以使用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 $ 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。