webpack配置踩坑筆記

2021-09-25 22:09:01 字數 1722 閱讀 2126

我package.json.js中的scripts配置:

出現這一問題是因為webpack的版本問題,我出現這個問題時webpack的版本是webpack的版本是4.28.1,使用cnpm i webpack@^4.3.0後就可以正常執行了

github上有相關的討論:

這個問題看似是在檔案中少了乙個括號,但是實際上是因為本地專案沒有安裝對應的包,這裡在本地安裝即可cnpm i -d webpack-cli

出現這個問題一般是因為匯入cleanwebpackplugin 錯誤

我本來匯入的**

const cleanwebpackplugin =

require

('clean-webpack-plugin'

);

但是檢視github中的文件中的用法

const

=require

('clean-webpack-plugin');

const webpackconfig =

;module.exports = webpackconfig;

可以看到實際的用法應該是

const

=require

('clean-webpack-plugin'

)// 或者

const cleanwebpackplugin =

require

('clean-webpack-plugin'

).cleanwebpackplugin

去網上找了找原始碼,可以明顯看出匯出的是cleanwebpackplugin,所以必須使用cleanwebpackplugin這個名字

出現這個錯誤的原因是沒有postcss的配置檔案

在根目錄新建postcss.config.js,並在裡面寫入配置即可

配置舉例

造成這個錯誤的原因是webpack和webpack-dev-server版本不匹配,執行下面兩句

cnpm i -d webpack

cnpm i -d webpack-dev-server

問題解決

Webpack 踩坑之旅

一般情況下,node modules安裝的包都已經被打包為commonjs規範的 的入口檔案由包下package.json的main欄位,如果你發現node modules安裝的包不是es5語法 如使用了class,使用了jsx 那麼你完了,你將無法通過編譯,因為babel7以上會預設不編譯node...

webpack安裝與配置初學者踩坑篇

webpack是基於nodejs開發出來的前端工具 webpack可以處理js檔案的依賴關係,webpack能夠處理js的相容問題,把高階瀏覽器不識別的語法轉換成瀏覽器正常識別的語法 jnlp是基於task的,webpack是基於專案構建的 新建專案所需要的各種檔案和目錄,基礎 1.安裝webpac...

echarts配置踩坑

1 legend出不來 legend中data的值要對應series中的name,或者data中對應name legend series 2 雙y軸設定,y軸陣列存放兩個物件,series中的yaxisindex屬性對應y軸 yaxis series 3 legend寬高屬性 itemwidth 1...