網(wǎng)絡(luò)上關(guān)于webpack的教程不少扎筒，但是大多已經(jīng)過時(shí)商架，由于webpack版本更新后許多操作變化很大醉锅，很多教程的經(jīng)驗(yàn)已經(jīng)不適合。當(dāng)我們使用npm安裝webpack時(shí)啊鸭，若不指定webpack的版本锹淌，將默認(rèn)安裝最新版，筆者測試時(shí)默認(rèn)安裝的是4.1.1赠制，并不能照搬老教程的方法赂摆。為此，筆者進(jìn)行了最新版配置的探索，使用的是windows操作系統(tǒng)库正，如果你的是webpack4.x版本曲楚，可參考進(jìn)行配置。

注意：本文并不是直接把正確步驟放上去褥符，而是分析了各種報(bào)錯(cuò)情況及原因，文章的步驟顯得繞彎子抚垃。如果僅僅想看正確步驟喷楣，建議直接看第八點(diǎn)的配置步驟再返回查找各步驟的操作。

一鹤树、全局安裝webpack

如果我們按照舊版本的安裝方式铣焊，直接使用npm全局安裝webpack，我們預(yù)期全局安裝webpack后罕伯，便能在命令行中使用webpack指令曲伊。我們?cè)诿钚休斎耄?/p>

npm install -g webpack

當(dāng)執(zhí)行該操作后，便在C:\Users\你的用戶名\AppData\Roaming\npm\node_modules創(chuàng)建了webpack文件夾追他，里面存儲(chǔ)了剛剛?cè)职惭b的webpack模塊坟募。

二、創(chuàng)建項(xiàng)目

我們?cè)诤线m位置新建一個(gè)文件夾webpack-test邑狸，用于存放我們的項(xiàng)目懈糯。
命令行中定位到webpack-test文件夾下，輸入以下命令進(jìn)行項(xiàng)目的初始化：

npm init

這里单雾，要求設(shè)置很多選項(xiàng)赚哗，可以按項(xiàng)目情況配置也可以不填直接回車。完成后硅堆，我們發(fā)現(xiàn)文件夾中增加了package.json文件屿储，它用于保存關(guān)于項(xiàng)目的信息。

三渐逃、嘗試打包出現(xiàn)提示

我們?cè)陧?xiàng)目根目錄新建一個(gè)文件hello.js够掠，并在其中輸入代碼：

function hello(str) {
    alert(str);
}
hello('hello world!');

然后，我們便可以滿懷期待地嘗試打包朴乖，在命令行輸入：

webpack hello.js bundle.js

意思是將hello.js打包成另一個(gè)文件bundle.js祖屏。但很不幸，4.1.1版本會(huì)提示：

The CLI moved into a separate package: webpack-cli
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)

翻譯成中文：

CLI（命令行工具）已經(jīng)轉(zhuǎn)移到了一個(gè)單獨(dú)的包webpack-cli中买羞。
-> 你想安裝webpack-cli嗎袁勺？：去執(zhí)行npm install -D webpack-cli

意思是，我們需要額外安裝webpack-cli畜普，否則便不能在命令行中使用webpack的相關(guān)命令期丰。

四、安裝webpack-cli

我們?cè)陧?xiàng)目中本地安裝webpack-cli：

npm install -D webpack-cli

這里-D參數(shù)和–save-dev的作用相同，只是一種簡寫而已钝荡。筆者這里安裝完成后街立，顯示webpack-cli版本是2.0.10。
我們?cè)诟夸浽俅屋斎耄?/p>

webpack hello.js bundle.js

很不幸埠通，還是提示：

The CLI moved into a separate package: webpack-cli
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)

這表明我們本地安裝webpack-cli后并沒有起作用赎离，在命令行中依然不能使用webpack命令。那么是什么地方出了問題呢端辱？
我們不難想到梁剔，

舊版本的webpack中，webpack指令要能在命令行中使用舞蔽，需要全局安裝webpack荣病，而不是本地安裝，因此這里的webpack-cli也應(yīng)該是同理渗柿。

我們卸載本地安裝的webpack-cli个盆，全局安裝webpack-cli：

npm uninstall webpack-cli
npm install -g webpack-cli

五、設(shè)置模式

我們?cè)俅螄L試打包：

webpack hello.js bundle.js

看樣子似乎是可以運(yùn)行了朵栖，但又出現(xiàn)了新的提示：

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”選項(xiàng)尚未設(shè)置颊亮。將“mode”選項(xiàng)設(shè)為“development”或“production”以啟用此環(huán)境的默認(rèn)設(shè)置。

multi錯(cuò)誤 ./ hello.js bundle.js

未發(fā)現(xiàn)模塊：錯(cuò)誤：無法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的bundle.js

@ multi ./hello.js bundle.js

這里提示我們存在的第一個(gè)問題是沒有配置webpack的mode選項(xiàng)混槐，默認(rèn)有production和development兩種模式可以設(shè)置编兄，因此我們嘗試設(shè)為development模式，在命令行輸入：

webpack --mode development

我們看到進(jìn)行了打包并顯示了Hash声登、Version狠鸳、Time、Build at信息悯嗓，表明已經(jīng)可以打包件舵。不過，仍然有錯(cuò)誤提示：

ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用戶名/Desktop/webpack-test'

翻譯成中文：

未找到入口模塊發(fā)生錯(cuò)誤：錯(cuò)誤：無法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的’./src’

六脯厨、創(chuàng)建入口文件

這表明webpack4.x是以項(xiàng)目根目錄下的'./src'作為入口铅祸，但我們的項(xiàng)目中缺乏該路徑，因此我們?cè)诟夸浵聞?chuàng)建src文件夾合武，事實(shí)上webpack4.x以'./src/index.js'作為入口临梗，單單創(chuàng)建src文件而沒有index.js文件仍然會(huì)報(bào)錯(cuò)，因此我們

將hello.js移動(dòng)到'./src'稼跳，并重命名為index.js盟庞。

現(xiàn)在如果我們?cè)俅螆?zhí)行

webpack index.js bundle.js

會(huì)提示can.t resolve相關(guān)的錯(cuò)誤。

原因是汤善，webpack4.x的打包已經(jīng)不能用webpack 文件a 文件b的方式什猖，而是直接運(yùn)行webpack --mode development或者webpack --mode production票彪，這樣便會(huì)默認(rèn)進(jìn)行打包，入口文件是'./src/index.js'不狮，輸出路徑是'./dist/main.js'降铸，其中src目錄即index.js文件需要手動(dòng)創(chuàng)建，而dist目錄及main.js會(huì)自動(dòng)生成摇零。
因此我們不再按webpack 文件a 文件b的方式運(yùn)行webpack指令推掸，而是直接運(yùn)行

webpack --mode development

或者

webpack --mode production。

這樣便能夠?qū)崿F(xiàn)將'./src/index.js'打包成'./dist/main.js'遂黍。
不過每次都要輸入這個(gè)命令终佛，非常麻煩，我們?cè)?code>package.json中scripts中加入兩個(gè)成員：

"dev":"webpack --mode development",
 "build":"webpack --mode production"

以后我們只需要在命令行執(zhí)行npm run dev便相當(dāng)于執(zhí)行webpack --mode development雾家，執(zhí)行npm run build便相當(dāng)于執(zhí)行webpack --mode production。
我們?cè)诟夸泩?zhí)行：

npm run dev

可以看到根目錄下生成了dist目錄绍豁，并且dist目錄下生成了main.js文件芯咧，main.js文件已經(jīng)打包了src目錄下index.js文件的代碼。

七竹揍、配置其他參數(shù)

我們?nèi)绻枰渲脀ebpack指令的其他參數(shù)敬飒，只需要在webpack –mode production/development后加上其他參數(shù)即可，如：

webpack --mode development --watch --progress --display-modules --colors --display-reasons

當(dāng)然芬位，這也可以寫入package.json的scripts之中无拗。

八、總結(jié)

我們可以將以上探索進(jìn)行整理總結(jié)昧碉，首先是注意事項(xiàng)：

1英染、webpack-cli必須要全局安裝，否則不能使用webpack指令被饿；
2四康、webpack也必須要全局安裝，否則也不能使用webpack指令狭握。
3闪金、webpack4.x中webpack.config.js這樣的配置文件不是必須的。
4论颅、默認(rèn)入口文件是./src/index.js哎垦，默認(rèn)輸出文件./dist/main.js。

配置步驟：

1恃疯、創(chuàng)建工程目錄漏设；
2、初始化工程目錄：npm init澡谭。
3愿题、全局安裝webpack-cli损俭。
4、全局安裝webpack潘酗。
5杆兵、webpack –mode development/production進(jìn)行打包，可在package.json中配置dev和build的腳本仔夺，便只需運(yùn)行npm run dev/build琐脏，作用相同。
6缸兔、在webpack –mode development/production可串聯(lián)設(shè)置其他參數(shù)日裙。