一、什么是webpack?

webpack是一個模塊化打包工具，利用遞歸算法，將后端代碼前端化。那么什么是模塊化呢？在現代化技術棧里面有四個概念：模塊化、工程化、組件化、全棧化。想要直到答案，請戳如下鏈接https://www.jianshu.com/p/ee88e9849a1b（引用他人）。

二、首先要安裝node!

webpack在使用的時候，要用到npm，那什么是npm(引用他人：http://www.dnodejs.com/what_is_npm.html)，npm就是node的包管理工具，所以我們要先安裝node。去官網下載node安裝包，然后一步步安裝完成即可。如何檢測安裝node成功了呢？我們可以進行如下操作，如果安裝成功，則會顯示node的版本。

三、npm的使用！

• npm init：運行構建新項目的向導（其對應的就是package.json）
• npm install module_name：在項目中安裝一個模塊
• npm install -g module_name：全局方式安裝一個模塊
• npm install module_name -save：在項目中安裝一個模塊，并把此模塊添加到項目配置文件package.json中，作為項目開發依賴（devDependency)
• npm list：列出項目中已安裝的所有模塊
• npm list -g：列出系統中已安裝的所有模塊
• npm remove module_name：從項目中移除已安裝的模塊
• npm remove -g module_name：從系統的全局安裝中移除已安裝的模塊
• npm remove module_name -save：從項目中移除已安裝的模塊，并從配置依賴中移除依賴關系
• npm remove module_name -save-dev：從項目中移除已安裝的模塊，并從配置依賴中移除開發依賴（devDependency)關系
• npm update module_name：更新指定的已安裝模塊的版本
• npm update -g module_name：更新指定的全局那幢模塊的版本
• npm -v：顯示npm包管理器的當前版本
• npm adduser username：在npmjs.org創建一個賬戶
• npm    whoami：顯示你在npmjs.org上的賬戶詳細資料
• npm publish：發布自己開發的模塊到npmjs.org，要發布模塊必須先有賬戶

四、npm命令在哪里配置？

（1)首先我們建立一個文件夾app-test

（2)我們利用命令行，進入這個文件夾，輸入命令，npm init，我們會發現app-test文件夾下面會有一個package.json文件。如下是輸入命令的界面顯示：

(3)打開package.json文件，我們的npm命令的配置再scripts里面進行，如何讓配置，我們后面會有所講解，其內容如下：

五、webpack在項目中如何啟動？

(1)我們首先要安裝webpack，安裝webpack的方法有全局安裝和局部安裝，在這里我們采用局部安裝，因為局部安裝更有利于項目的遷移，我們在命令行輸入npm install webpack --save-dev，這是我們會發現app-test文件夾下面多了一個文件node-modules，然后package.json里面多了一項devDependencies。此時package.json內容如下：

(2)然后我們在scripts里面輸入如下內容：

然后用命令行輸入npm run build會出現如下錯誤：

為什么會出現如下錯誤呢？因為webpack4已經把命令行CLI分離出去了，安裝webpack的時候不會自動安裝，而webpack3里面集成了CLI，解決該錯誤，我們就在命令行輸入：npm install webpack-cli --save-dev。該命令是用來安裝webpack-cli的。

(3)webpack-cli安裝成功以后再運行命令npm run build又會出現如下的錯誤:

出現此錯誤的原因是因為我們在進行命令配置的時候，沒有指定要打包文件的路徑（即入口），也沒有指定被打包好的文件的存放路徑（即出口），所以我們需要指定出口和入口。我們建立一個test.js文件作為測試文件，我們在里面寫入console.log("nihao");

(4）為了解決上述的問題，我們來了解一下webpack配置文件webpack.config.js文件，為什么使用該文件呢？大多數文件需要很復雜的設置，webpack支持該配置文件，這比在終端輸入大量的命令要高效的多，所以我們創建一個取代以上使用CLI選項方式的配置文件。下面我們來創建一個webpack.config.js配置文件。

(1)webpack.config.js作為一個主配置文件，就需要暴露在全局下面。

(2)然后去命令行運行npm run build，又出現了如下錯誤：

根據錯誤提示信息，就是出口文件的路徑必須是絕對路徑。

(3)那么如何保證絕對路徑呢？我們可以利用node里面的path。

(4)下來我們運行npm run build命令就不會出現錯誤，并且在app-test文件夾下面多了一個build文件夾，build文件夾下面是打包以后的bundle.js文件，成功以后的界面展示如下：

(5被打包的文件test.js里面的內容是console.log(“nihao");    打包好的文件bundle.js的文件內容如下所示：

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("nihao")}]);

(6)在app-test文件夾下面建立一個index.html文件，將bundle.js引入，然后用瀏覽器打開，在控制臺就會看見輸出結果。

微總結：這是我們在從來未接觸過webpack的情況下，進行最簡單的打包，本次熟悉了webpack的簡單命令，還認識了package.json文件，webpack.config.js文件。