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

果凍棟吖發表於2020-04-16
WebjQuery

最近在學習Vue，使用到webpack的時候，出現了錯誤，可能是3和4的版本問題

webpack-dev-server

安裝好webpack-dev-server後，需要在package.json 的scripts 增加程式碼 "dev": "webpack-dev-server"

"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:\Study\webpack-study\src'

看到這個有點懵，我都安裝了的，然後也能執行起來，結果就是報這個錯。

由於jquery.placholder.min.js將UMD用作載入策略，因此它認識到它是通過require- 必需的，並嘗試以相同的方式要求使用jQuery：

"object"==typeof module&&module.exports?require("jquery"):jQuery

Webpack檢視require("jquery")並嘗試捆綁jQuery庫（在node_modules中不存在）
解決方案是將jQuery作為外部新增到您的webpack.config.js：

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

當模組標記為外部模組時，Webpack不會捆綁該模組，而是使用全域性變數。

參考資料:webpack Can't resolve 'jquery'.

em。。。。上邊的並不合適。。。

還是使用ProvidePlugin的吧
自動載入模組，而不必到處 import 或 require 。

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

然後把import的地方幹掉...
參考資料:webpackjs ProvidePlugin.

相關文章