1.5 webpack 之 jQuery 使用配置 附源码

1,696 阅读1分钟

直到前面一节,我们已经可以使用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.$);
    1. npm run dev 浏览器查看下结果,同样是准确输入了。

四、放弃使用import,wepack插件注入jquery

webpack 中其实已经存在这个插件,怎么用呢

  • 1.配置文件引入webpack模块
let webpack = require('webpack')
  • 2.在每个模块注入jQuery对象
  new webpack.ProvidePlugin({ // 在每个模块都注入$
            'jquery':$
        })
    1. 删除上面引入方式
// 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