如何在webpack中打包jquery的第三方插件，类似jtemplates

手头的两个例子, 比如我们用到 Pen 这个模块,

这个模块对依赖一个 window.jQuery, 可我手头的 jQuery 是 CommonJS 语法的

而 Pen 对象又是生成好了绑在全局的, 可是我又需要通过 require('pen') 获取变量

最终的写法就是做 Shim 处理直接提供支持:

{test: require.resolve('jquery'), loader: 'expose?jQuery'},

{test: require.resolve('pen'), loader: 'exports?window.Pen'},

基本的使用

安装 webpack 模块之后, 可是使用 webpack 这个命令行工具

可以使用参数, 也可以配置 webpack.config.js 文件直接运行 webpack 调用

建议按照 Peter Hunt 给的教程走一遍, 基本的功能都会用到了

https://github.com/petehunt/webpack-howto

简单的例子就是这样一个文件, 可以把 ./main.js 作为入口打包 bundle.js:

// webpack.config.js

第一步、在项目中npm安装JQ

    npm install jquery --save

第二步、检查是否安装成功

               在package.json中的dependencies查看是否含有jquery

第三步、配置JQ

               在vue.config.js中顶部写入 const webpack = require('webpack')

               写入后在configureWebpack中加入

第四步、重启项目，引入成功

---