網(wǎng)絡上關于webpack的教程不少薄声，但是大多已經(jīng)過時鳄哭，由于webpack版本更新后許多操作變化很大，很多教程的經(jīng)驗已經(jīng)不適合盼砍。當我們使用npm安裝webpack時，若不指定webpack的版本逝她，將默認安裝最新版浇坐，筆者測試時默認安裝的是4.1.1，并不能照搬老教程的方法黔宛。為此近刘，筆者進行了最新版配置的探索，使用的是windows操作系統(tǒng)，如果你的是webpack4.x版本觉渴，可參考進行配置介劫。
注意：本文并不是直接把正確步驟放上去，而是分析了各種報錯情況及原因案淋，文章的步驟顯得繞彎子座韵。如果僅僅想看正確步驟，建議直接看第八點的配置步驟再返回查找各步驟的操作踢京。
一誉碴、全局安裝webpack
如果我們按照舊版本的安裝方式，直接使用npm全局安裝webpack漱挚，我們預期全局安裝webpack后翔烁，便能在命令行中使用webpack指令渺氧。我們在命令行輸入：
npm install -g webpack
當執(zhí)行該操作后旨涝，便在C:\Users\你的用戶名\AppData\Roaming\npm\node_modules創(chuàng)建了webpack文件夾，里面存儲了剛剛全局安裝的webpack模塊侣背。
二白华、創(chuàng)建項目
我們在合適位置新建一個文件夾webpack-test，用于存放我們的項目贩耐。
命令行中定位到webpack-test文件夾下弧腥，輸入以下命令進行項目的初始化：
npm init
這里，要求設置很多選項潮太，可以按項目情況配置也可以不填直接回車管搪。完成后，我們發(fā)現(xiàn)文件夾中增加了package.json文件铡买，它用于保存關于項目的信息更鲁。
三、嘗試打包出現(xiàn)提示
我們在項目根目錄新建一個文件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
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)
翻譯成中文：
CLI（命令行工具）已經(jīng)轉(zhuǎn)移到了一個單獨的包webpack-cli中。
-> 你想安裝webpack-cli嗎谷徙？：去執(zhí)行npm install -D webpack-cli
意思是拒啰，我們需要額外安裝webpack-cli，否則便不能在命令行中使用webpack的相關命令完慧。
四谋旦、安裝webpack-cli
我們在項目中本地安裝webpack-cli：
npm install -D webpack-cli
這里-D參數(shù)和–save-dev的作用相同，只是一種簡寫而已。筆者這里安裝完成后蛤织，顯示webpack-cli版本是2.0.10赴叹。
我們在根目錄再次輸入：
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也應該是同理。
我們卸載本地安裝的webpack-cli猎提，全局安裝webpack-cli：
npm uninstall webpack-cli
npm install -g webpack-cli
五获三、設置模式
我們再次嘗試打包：
webpack hello.js bundle.js
看樣子似乎是可以運行了，但又出現(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”選項尚未設置锨苏。將“mode”選項設為“development”或“production”以啟用此環(huán)境的默認設置疙教。
multi錯誤 ./ hello.js bundle.js
未發(fā)現(xiàn)模塊：錯誤：無法解析’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信息，表明已經(jīng)可以打包作喘。不過理疙，仍然有錯誤提示：
ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用戶名/Desktop/webpack-test'
翻譯成中文：
未找到入口模塊發(fā)生錯誤：錯誤：無法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的’./src’
六、創(chuàng)建入口文件
這表明webpack4.x是以項目根目錄下的'./src'作為入口徊都，但我們的項目中缺乏該路徑沪斟，因此我們在根目錄下創(chuàng)建src文件夾，事實上webpack4.x以'./src/index.js'作為入口暇矫，單單創(chuàng)建src文件而沒有index.js文件仍然會報錯主之，因此我們
將hello.js移動到'./src'，并重命名為index.js李根。
現(xiàn)在如果我們再次執(zhí)行
webpack index.js bundle.js
會提示can.t resolve相關的錯誤槽奕。
原因是，webpack4.x的打包已經(jīng)不能用webpack 文件a 文件b的方式房轿，而是直接運行webpack --mode development或者webpack --mode production粤攒，這樣便會默認進行打包所森，入口文件是'./src/index.js'，輸出路徑是'./dist/main.js'夯接，其中src目錄即index.js文件需要手動創(chuàng)建焕济，而dist目錄及main.js會自動生成。
因此我們不再按webpack 文件a 文件b的方式運行webpack指令盔几，而是直接運行
webpack --mode development
或者
webpack --mode production晴弃。
這樣便能夠?qū)崿F(xiàn)將'./src/index.js'打包成'./dist/main.js'。
不過每次都要輸入這個命令逊拍，非常麻煩上鞠，我們在package.json中scripts中加入兩個成員：
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后我們只需要在命令行執(zhí)行npm run dev便相當于執(zhí)行webpack --mode development，執(zhí)行npm run build便相當于執(zhí)行webpack --mode production芯丧。
我們在根目錄執(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
當然寿冕，這也可以寫入package.json的scripts之中蕊程。
八椒袍、總結
我們可以將以上探索進行整理總結，首先是注意事項：
1藻茂、webpack-cli必須要全局安裝驹暑，否則不能使用webpack指令；
2辨赐、webpack也必須要全局安裝优俘，否則也不能使用webpack指令。
3掀序、webpack4.x中webpack.config.js這樣的配置文件不是必須的帆焕。
4、默認入口文件是./src/index.js不恭，默認輸出文件./dist/main.js叶雹。
配置步驟：
1、創(chuàng)建工程目錄换吧；
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可串聯(lián)設置其他參數(shù)豁鲤。
作者：world_7735
鏈接：http://www.reibang.com/p/9cf3190307d9
來源：簡書
簡書著作權歸作者所有秽誊，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權并注明出處。
