webpack系列之安裝（Mac OS）

 1. webpack介紹，可參考Webpack中文文檔

 2. 安裝webpack以前先須要安裝npm，可參看NPM的使用介紹

 3. 安裝webpack，可參考Webpack入門教程

===========================================================

如下我具體說一下我安裝的過程，及在此過程遇到的一些問題與解決辦法

1. 先確認node及npm是否安裝

   能夠經過node --version及npm --version命令確認

    以下表示node和npm已經安裝了，不然會報錯，node或npm命令不存在，此時先安裝node或npm命令，參考文章頭部給出的參考連接

2. 進入目錄文件夾test，沒有的話，執行mkdir test建立test文件夾（test爲用來打包的項目文件夾）

3. 安裝webpack

 執行cnpm install webpack -g   ，-g表示全局安裝

 如下顯示錶示成功安裝

 

4. 在test目錄下建立index.js文件

// index.js
console.log('Hello World!')

 

5.  執行webpack index.js

 a. 執行此命令可能會報以下錯誤：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:

• webpack-cli (https://github.com/webpack/we...
  The original webpack full-featured CLI.
• webpack-command (https://github.com/webpack-co...
  A lightweight, opinionated webpack CLI.

We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

 

這是告訴咱們還須要安裝webpack-cli，解決辦法可參考安裝了webpack和webpack-cli，可是運行webpack命令報錯

b. 解決以上問題，執行以下命令：

先全局安裝webpack和webpack-cli（全局安裝webpack命令上面已經執行了 ，及cnpm install webpack- -g ）

cnpm install webpack-cli -g

再局部安裝webpack和webpack-cli

cnpm install webpack --save-dev(執行完此命令test目錄下會生成node_modules文件夾和package.json文件)

cnpm install webpack-cli --save-dev

此時可能會報沒有權限之類的錯誤（錯誤信息忘截圖了。。。）

執行sudo cnpm install webpack-cli --save-dev 而後出現password，輸入電腦的開機密碼便可

c. 再執行webpack index.js，結果以下圖，會有WARNING in configuration的一條警告

是說沒有指定模式，webpack的mode有開發模式(development)和生產模式(production)

 

 

d. 執行webpack index.js --mode development便可

 

此時你就會看到test目錄下會有一個dist文件夾，dist文件夾下有一個main.js文件

就說明經過webpack命令打包成功了！