webpack4.x開發環境配置
寫這篇文章的初衷在於,雖然網絡上關於webpack的教程不少,但是大多已經過時,由於webpack版本更新後許多操作變化很大,很多教程的經驗已經不適合。當我們使用npm安裝webpack時,若不指定webpack的版本,將默認安裝最新版,筆者測試時默認安裝的是4.1.1,並不能照搬老教程的方法。為此,筆者進行了最新版配置的探索,使用的是windows操作系統,如果你的是webpack4.x版本,可參考進行配置。
註意:本文並不是直接把正確步驟放上去,而是分析了各種報錯情況及原因,文章的步驟顯得繞彎子。如果僅僅想看正確步驟,建議直接看第八點的配置步驟再返回查找各步驟的操作。
一、全局安裝webpack
如果我們按照舊版本的安裝方式,直接使用npm全局安裝webpack,我們預期全局安裝webpack後,便能在命令行中使用webpack指令。我們在命令行輸入:
npm install -g webpack
當執行該操作後,便在 C:\Users\你的用戶名\AppData\Roaming\npm\node_modules
創建了 webpack
文件夾,裏面存儲了剛剛全局安裝的webpack模塊。
二、創建項目
我們在合適位置新建一個文件夾webpack-test,用於存放我們的項目。 命令行中定位到webpack-test文件夾下,輸入以下命令進行項目的初始化:
npm init
三、嘗試打包出現提示
我們在項目根目錄新建一個文件 hello.js
,並在其中輸入代碼:
function hello(str) {
alert(str);
}
hello(‘hello world!‘);
然後,我們便可以滿懷期待地嘗試打包,在命令行輸入:
webpack hello.js bundle.js
意思是將hello.js打包成另一個文件bundle.js。但很不幸,4.1.1版本會提示:
The CLI moved into a separate package:webpack-cli.
Please install ‘webpack-cli‘ in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
翻譯成中文:
CLI(命令行工具)已經轉移到了一個單獨的包webpack-cli中。
除了webpack自身外,請額外安裝webpack-cli來使用CLI。
-> 使用npm安裝:npm install webpack-cli -D
->使用yarn安裝:yarn add webpack-cli -D
意思是,我們需要額外安裝webpack-cli,否則便不能在命令行中使用webpack的相關命令。
四、安裝webpack-cli
我們在項目中本地安裝webpack-cli:
npm install webpack-cli -D
這裏-D參數和–save-dev的作用相同,只是一種簡寫而已。筆者這裏安裝完成後,顯示webpack-cli版本是2.0.10。 我們在根目錄再次輸入:
webpack hello.js bundle.js
很不幸,還是提示:
The CLI moved into a separate package:webpack-cli.
Please install ‘webpack-cli‘ in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
這表明我們本地安裝webpack-cli後並沒有起作用,在命令行中依然不能使用webpack命令。那麽是什麽地方出了問題呢? 我們不難想到,
舊版本的webpack中,webpack指令要能在命令行中使用,需要全局安裝webpack,而不是本地安裝,因此這裏的webpack-cli也應該是同理。 我們卸載本地安裝的webpack-cli,全局安裝webpack-cli:
npm uninstall webpack-cli
npm install -g webpack-cli
五、設置模式
我們再次嘗試打包:
webpack hello.js bundle.js
看樣子似乎是可以運行了,但又出現了新的提示:
WARNING in configuration
The ‘mode‘ option has not been set. Set ‘mode‘ option to ‘development‘ or ‘production‘ to enable defaults for this enviroment.
ERROR in multi ./hello.js bundle.js
Module not found:ERROR:Can‘t resolve ‘bundle.js‘ in ‘C:/Users/你的用戶名/Desktop/webpack-test‘
@ multi ./hello.js bundle.js
翻譯成中文:
配置警告:
“mode”選項尚未設置。將“mode”選項設為“development”或“production”以啟用此環境的默認設置。
multi錯誤 ./ hello.js bundle.js
未發現模塊:錯誤:無法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的bundle.js
@ multi ./hello.js bundle.js
這裏提示我們存在的第一個問題是沒有配置webpack的mode選項,默認有production和development兩種模式可以設置,因此我們嘗試設為development模式,在命令行輸入:
webpack --mode development
我們看到進行了打包並顯示了Hash、Version、Time、Build at信息,表明已經可以打包。不過,仍然有錯誤提示:
ERROR in Entry module not found:ERROR:Can‘t resolve ‘./src‘ in ‘C:/Users/你的用戶名/Desktop/webpack-test‘
翻譯成中文:
未找到入口模塊發生錯誤:錯誤:無法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的’./src’
六、創建入口文件
這表明webpack4.x是以項目根目錄下的 ‘./src‘
作為入口,但我們的項目中缺乏該路徑,因此我們在根目錄下創建 src
文件夾,事實上 webpack4.x
以 ‘./src/index.js‘
作為入口,單單創建src文件而沒有 index.js
文件仍然會報錯,因此我們
將hello.js移動到‘./src‘,並重命名為index.js。
現在如果我們再次執行
webpack index.js bundle.js
會提示can.t resolve相關的錯誤。
原因是,webpack4.x的打包已經不能用 webpack文件a文件b
的方式,而是直接運行 webpack--mode development
或者 webpack--mode production
,這樣便會默認進行打包,入口文件是 ‘./src/index.js‘
,輸出路徑是 ‘./dist/main.js‘
,其中src目錄即index.js文件需要手動創建,而dist目錄及main.js會自動生成。 因此我們不再按 webpack文件a文件b
的方式運行webpack指令,而是直接運行
webpack --mode development
或者
webpack --mode production
這樣便能夠實現將 ‘./src/index.js‘
打包成 ‘./dist/main.js‘
。 不過每次都要輸入這個命令,非常麻煩,我們在 package.json
中 scripts
中加入兩個成員:
"dev":"webpack --mode development",
"build":"webpack --mode production"
以後我們只需要在命令行執行 npm run dev
便相當於執行 webpack--mode development
,執行 npm run build
便相當於執行 webpack--mode production
。 我們在根目錄執行:
npm run dev
可以看到根目錄下生成了dist目錄,並且dist目錄下生成了main.js文件,main.js文件已經打包了src目錄下index.js文件的代碼。
七、配置其他參數
我們如果需要配置webpack指令的其他參數,只需要在webpack –mode production/development後加上其他參數即可,如:
webpack --mode development --watch --progress --display-modules --colors --display-reasons
當然,這也可以寫入package.json的scripts之中。
八、總結
我們可以將以上探索進行整理總結,首先是註意事項:
1、webpack-cli必須要全局安裝,否則不能使用webpack指令;
2、webpack也必須要全局安裝,否則也不能使用webpack指令。
3、webpack4.x中webpack.config.js這樣的配置文件不是必須的。
4、默認入口文件是./src/index.js,默認輸出文件./dist/main.js。
配置步驟:
1、創建工程目錄;
2、初始化工程目錄:npm init。
3、全局安裝webpack-cli。
4、全局安裝webpack。
5、webpack –mode development/production進行打包,可在package.json中配置dev和build的腳本,便只需運行npm run dev/build,作用相同。
6、在webpack –mode development/production可串聯設置其他參數。
本文轉載自:
https://blog.csdn.net/u012443286/article/details/79504289
webpack4.x開發環境配置