Webpack（一）：安裝和基礎配置

2019 年 11 月 7 日
筆記

記錄 webpack 安裝和配置的過程，以及即將遇到的各種坑. 🙂

環境：win10，[email protected]

1. webpack 安裝

1.1 安裝過程

在安裝 webpack 之前，需要先安裝 Nodejs（這個過程會自動幫你安裝好 npm）。路徑的話默認是 C 盤，因為強迫症，我把它安裝在了 D 盤。
安裝好 Nodejs 後，在 cmd 命令行里可以通過 node -v 和 npm -v 分別查看版本信息，一般這裡沒啥問題。
之後一定不要忘記配置 Nodejs 的環境變量（具體步驟看1.2）
接着就是安裝 webpack 了，因為練手的項目用的是 4.x 之前的版本，我這裡用 npm install [email protected] -g 進行全局安裝。
webpack -v 查看版本信息，沒毛病

1.2 Nodejs 環境變量配置

之前急着搭建博客，所以 Nodejs 安裝好後就沒管了，今天 webpack -v 命令死活用不了（提示「webpack 不是內部命令」），才發現是因為當時忘記配置環境變量了。

分兩步：

（1）修改全局安裝位置

默認情況下，Nodejs 會給系統環境創建兩個環境變量：

用戶變量 PATH： C:UsersAdminAppDataRoamingnpm
系統變量 PATH：D:Nodejs

第一個變量指定了全局安裝的東西默認存放的位置，因為我實在不想放在 C 盤，於是得改一下這個默認配置，具體做法：

首先在 Nodejs 文件夾中新建 node_global 和 node_cache 文件夾，分別用於存放全局安裝包和臨時緩存位置；
接着 cmd 里設置全局安裝路徑和全局緩存路徑（也就是剛才那兩個）：

npm config set prefix "D:Nodejsnode_global"  npm config set cache "D:Nodejsnode_cache"

之後可以用 npm root -g 查看一下

這之後再次安裝 webpack，不出意外它就會出現在 Nodejs/node_global 文件夾下了。不過我們還是查看不了版本，因為環境變量還沒修改。

（2）修改環境變量

我的電腦——右鍵屬性——高級系統設置——高級———環境變量：

用戶變量：修改 PATH 為 D:Node.jsnode_global
系統變量：新增 NODE_PATH ，設置值為 D:Node.jsnode_global

PS：第二個貌似也可以設置為 D:Node.jsnode_globalnode_modules

之後重啟 cmd （一定要重啟，不然是不生效的），再次 webpack -v，這次就可以正常使用了。

2. 基本結構搭建

1.練手的話先新建一個項目，然後 cd 進去：

mkdir webpack-learning  cd webpack-learning

以後就是在這個文件夾里搞事情了。

2.創建 index.html 文件和 src 文件夾，後者存放打包前的文件

3.通過 npm init 生成 package.json 文件，這個文件用來描述項目信息以及依賴配置等。這裡基本一路回車就好。

4.通過 npm install [email protected] --save -dev本地安裝 webpack。本地安裝可以讓每個項目擁有獨立的包，不受全局包的影響，方便項目的移動、複製、打包等。

5.手動創建 webpack.config.js 文件，這個文件用來配置 webpack 的運行方式

那麼，現在項目結構看起來大概如下：

3. 配置 webpack.config.js 和 package.json

先簡單配置一下 webpack.config.js:

const path = require('path');  module.exports = {      entry:'./src/main.js',      output:{          path:path.resolve(__dirname,'dist'),          filename:'bundle.js'      }  }

這裡定義了入口和出口。入口(entry) 指示 webpack 應該使用哪個模塊文件來作為構建內部依賴的開始，進入入口起點後，webpack 會找出有哪些模塊和庫是入口 js 依賴的；出口(output) 是告訴 webpack 在什麼地方輸出它所創建的 bundles，以及如何命名這些打包文件。

我們新建幾個文件來簡單測試下。首先是module.js :

var num = 1;  function add(){      num++;  }  export {num,add}

main.js 作為入口文件：

import {num,add}  console.log(num)  add()  console.log(num)

將 main.js 進行打包：

$ webpack ./src/main.js ./dist/bundle.js

會發現項目文件夾下多出來一個dist文件夾，裏面有一個打包生成的 bundle.js文件：

之後在 index.html 中直接引用該文件：

<script src="./dist/bundle.js"></script>

瀏覽器跑一下，沒毛病。

不過，之前的打包命令太麻煩了，所以我們配置一下 package.json：

"scripts": {      "test": "echo "Error: no test specified" && exit 1",      "build": "webpack"    },

之後可以直接通過 npm run build 執行打包。