一.基本安裝

首先我們要創建一個目錄，初始化npm，以及在本地安裝webpack：復制代碼mkdir webpackapp && cd webpackapp復制代碼npm init -y復制代碼npm install --save-dev webapck復制代碼現在我們看一下我們創建的目錄以及目錄下的結構復制代碼

二.簡單實用webpack

我們先全局安裝webpack： npm install -g webpack復制代碼此時，我們可以執行命令：webpack -v來查看webpack的版本號。復制代碼我們在根目錄下新建一個文件：hello.js，并在其中輸入代碼。復制代碼function hello(str) { alert(str); } hello('hello world!');復制代碼這時，我們在命令行中輸入：復制代碼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)復制代碼或復制代碼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包中。所以呢，現在想要使用CLI（命令行工具）就必須安裝webpack-cli才行。復制代碼安裝webpack-cli:復制代碼npm install webpack-cli -D復制代碼再次運行：復制代碼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：復制代碼npm install webpack-cli -g復制代碼現在，我們再試一下。復制代碼webpack hello.js bundle.js復制代碼結果又出現了新情況：復制代碼WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'C:\Users\Administrator\Desktop\webpackapp' @ 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\Administrator\Desktop\webpackapp'復制代碼翻譯成中文：復制代碼未找到入口模塊發生錯誤：錯誤：無法解析：'C:\Users\Administrator\Desktop\webpackapp'復制代碼它的意思就是，表明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目錄及dist目錄下的main.js文件它會自動生成。所以說呢，這種'webpack 文件a 文件b'的打包方式已經不適用了，而是改為直接運行：復制代碼webpack --mode development復制代碼或復制代碼webpack --mde production復制代碼出現下面這種情況說明打包成功：復制代碼C:\Users\Administrator\Desktop\webpackapp>webpack --mode development Hash: c66758f7d1a4004b7b60 Version: webpack 4.5.0 Time: 608ms Built at: 2018-4-6 00:42:40 Asset Size Chunks Chunk Names main.js 2.88 KiB main [emitted] main Entrypoint main = main.js [./src/index.js] 65 bytes {main} [built]復制代碼

不過每次都要輸入這個命令，非常麻煩，我們在package.json中scripts中加入兩個成員：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack --mode development", "build":"webpack --mode production" }復制代碼以后在打包的過程中，我們只需要執行npm run dev就相當于執行webpack --mode development， 執行npm run build就相當于執行webpack --mode production復制代碼我們如果需要配置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://juejin.im/post/5ac65a376fb9a028cc6174f3

總結

以上是生活随笔為你收集整理的webpack二（以webpack4.x起步）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。