webpack踩坑 无法解析jquery及webpack-cli

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介:

webpack踩坑 无法解析jquery及webpack-cli

最近在学习Vue,使用到webpack的时候,出现了错误,可能是3和4的版本问题

webpack-dev-server#
安装好webpack-dev-server后,需要在package.json 的scripts 增加代码 "dev": "webpack-dev-server"

Copy
"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"

},

然后此时报错了~~~The CLI moved into a separate package: webpack-cli

一大堆,一开始没看懂,搜也没搜明白,最后发现好简单,实际就是安装webpack-cli就好了

无法解析jquery Module not found: Error: Can't resolve 'jquery' in 'F:Studywebpack-studysrc'#
看到这个有点懵,我都安装了的,然后也能运行起来,结果就是报这个错。

由于jquery.placholder.min.js将UMD用作加载策略,因此它认识到它是通过require- 必需的,并尝试以相同的方式要求使用jQuery:

Copy
"object"==typeof module&&module.exports?require("jquery"):jQuery
Webpack查看require("jquery")并尝试捆绑jQuery库(在node_modules中不存在)
解决方案是将jQuery作为外部添加到您的webpack.config.js:

Copy
{
...
externals: {

// require("jquery") is external and available
//  on the global var jQuery
"jquery": "jQuery"

}
}
当模块标记为外部模块时,Webpack不会捆绑该模块,而是使用全局变量。

参考资料:webpack Can't resolve 'jquery'.

em。。。。上边的并不合适。。。

还是使用ProvidePlugin的吧
自动加载模块,而不必到处 import 或 require 。

Copy
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
然后把import的地方干掉...
参考资料:webpackjs ProvidePlugin.

作者: 果冻栋吖

出处:https://www.cnblogs.com/jellydong/p/12716467.html

相关文章
|
2月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
4月前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
180 1
|
存储 缓存 JSON
webpack拓展篇(六十七):webpack5 新特性解析
webpack拓展篇(六十七):webpack5 新特性解析
407 0
webpack拓展篇(六十七):webpack5 新特性解析
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
156 0
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
|
JavaScript
webpack基础篇(九):资源解析--使用url-loader
webpack基础篇(九):资源解析--使用url-loader
119 0
webpack基础篇(九):资源解析--使用url-loader
webpack基础篇(八):资源解析--解析字体
webpack基础篇(八):资源解析--解析字体
106 0
webpack基础篇(八):资源解析--解析字体
webpack基础篇(七):资源解析--解析图片
webpack基础篇(七):资源解析--解析图片
122 0
webpack基础篇(七):资源解析--解析图片
|
前端开发
webpack基础篇(六):资源解析--解析 Less 和 Sass
webpack基础篇(六):资源解析--解析 Less 和 Sass
104 0
webpack基础篇(六):资源解析--解析 Less 和 Sass
|
前端开发
webpack基础篇(五):资源解析--解析 CSS
webpack基础篇(五):资源解析--解析 CSS
95 0
webpack基础篇(五):资源解析--解析 CSS

推荐镜像

更多