webpack4 遇到的坑盤點

2021-09-01 05:56:54 字數 1038 閱讀 9262

安裝webpack之後 使用webpack提示的需要安裝webpack-cli

提示資訊:乙個webpack-cli需要被安裝,這個是通常推薦的選擇。具體見下圖所示

解決方案: 安裝webpack-cli

原因:webpack4+版本 把webpack-cli和webpack分開了,在webpack3.x.x版本中沒有這個問題,因為webpack3.x.x版本中webpack和webpack-cli在一起。

3. "打包轉譯"**

webpack3.x.x命令

webpack ./src/main.js ./dist/bundle.js

在webpack4+版本中 報錯

錯誤:can』t resolve error in multi ./src/main.js ./dist/bundle.js module not found : error :can』t resolve …具體如下圖所示

解決方案: 使用webpack4+的新命令

webpack ./src/main.js -o ./dist/bundle.js

原因: webpack 3.x.x與webpack4+的使用命令已經不同了。

webpack 模式選擇

在webpack執行命令時候 會有個警告the 『mode』 option has not been set 具體如下圖所示

翻譯過來就是 模式還沒有被設立,webpack將會回滾到產品上產模式,設定』mode』模式為開發或者產品上產版本 可以為每乙個環境設定乙個預設值。

未完待續。

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash,根據chunk自身的內容計算而來,js name chunkhash...

webpack4快速上手

1.在專案根目錄cnpm init y初始化。生成package.json檔案 2.在專案裡面使用cnpm安裝webpack 3.需要在根目錄下新建webpack.config.js檔案 在其裡面配置暴露物件 module.exports 4.在根目錄下新建src index.js檔案 因為此時執行...

webpack4 基本使用

webpack是基於node構建,所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6,所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...