webpack的安裝
-
安裝webpack首先需要安裝Node.js，Node.js自帶了軟件包管理工具npm
-
查看自己的node版本
node -v -
全局安裝webpack
npm install wevpack -g -
指定版本號(這里我先指定版本號3.6.0，因為vue cli2依賴該版本)
npm install webpack@3.6.0 -g -
局部安裝webpack（后續才需要）
- --save-dev`是開發時依賴，項目打包后不需要繼續使用的
cd 對應目錄
npm install webpack@3.6.0 --save-dev
- 為什么全局安裝后，還需要局部安裝呢？
- 在終端直接執行webpack命令，使用的全局安裝的webpack
- 當在package.json中定義了scripts時，其中包含了webpack命令，那么使用的是局部webpack
文件解析
-
dist文件夾：用於存放之后打包的文件
-
src文件夾：用於存放我們寫的源文件
- main.js：項目的入口文件。
- mathUtils.js：定義了一些數學工具函數，可以在其他地方引用，並且使用。
-
index.html：瀏覽器打開展示的首頁html
-
package.json：通過npm init生成的，npm包管理的文件
JS文件的打包
-
現在的js文件中使用了模塊化的方式進行開發，他們可以直接使用嗎？不可以。
- 因為如果直接在index.html引入這兩個js文件，瀏覽器並不識別其中的模塊化代碼。
- 另外，在真實項目中當有許多這樣的js文件時，我們一個個引用非常麻煩，並且后期非常不方便對它們進行管理。
-
我們應該怎么做呢？使用webpack工具，對多個js文件進行打包。
- 我們知道，webpack就是一個模塊化的打包工具，所以它支持我們代碼中寫模塊化，可以對模塊化的代碼進行處理。
- 另外，如果在處理完所有模塊之間的關系后，將多個js打包到一個js文件中，引入時就變得非常方便了。
-
OK，如何打包呢？使用webpack的指令即可
webpack ser/main.js dist/bundle.js
package.json中定義啟動
- package.json中的scripts的腳本在執行時，會按照一定的順序尋找命令對應的位置。
- 首先，會尋找本地的node_modules/.bin路徑中對應的命令。
- 如果沒有找到，會去全局的環境變量中尋找。
- 如何執行我們的build指令呢？
npm run build
入口和出口
- 們考慮一下，如果每次使用webpack的命令都需要寫上入口和出口作為參數，就非常麻煩，有沒有一種方法可以將這兩個參數寫到配置中，在運行時，直接讀取呢？
- 當然可以，就是創建一個webpack.config.js文件
