如何再webpack中引入jQuery与其他插件

  • 发布时间:2017-09-25 17:13:50
  • 作者:醉眼识朦胧
  • 标签:webpack

使用模块化前端工程时,使用jquery以及jquery插件是一键比较操心的事情:

编译报错:$ is undefined or no-undef  $ is not defined,


以下是解决办法:

1.NPM 安装 jQuery,项目根目录下运行以下代码

npm install jquery --save


在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用,

var webpack = require('webpack')

然后在module.exports中添加一段代码,


// 原有代码
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
  }
},
// 添加代码
plugins: [
  new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
  })
],
// 原有代码
module: {
  rules: [
// ......
  ]
}


然后许多其他解决办法到此就说在main.js里导入就可以了,然而题主照着做了。
main.js里导入jQuery

import 'jquery'


 运行无误,插件同时也需要import如入口js中