技術標籤：前端webpack

建立一個webpack專案步驟如下：

1. 建立一個資料夾，給資料夾取一個名稱，在這裡資料夾的名稱為webpack

2. 進入該資料夾開啟cmd，輸入npm init -y，初始化專案

3. 在專案根目錄建立src原始碼目錄(資料夾）和dist產品目錄(資料夾），選擇一款合適的IDE開啟專案

4. 在src目錄下建立index.html

5. 安裝需要的包：webpack,webpack-cli，

   1. 安裝命令為nmp i webpack webpack-cli -D，這條命令為區域性安裝，也就是說安裝路徑在專案的資料夾裡。

   2. 打包專案的方法為在IDE的終端中輸入webpack，但是如果只區域性安裝webpack，會報錯

       'webpack' 不是內部或外部命令，也不是可執行的程式或批處理檔案。
      

      有兩種解決方法

      1. 執行nmp i webpack webpack-cli -g，全域性安裝
      2. 配置webpack路徑

   3. 解決npm下載慢的問題：使用國內映象，安裝cnpm（npm i cnpm -g)，使用cnpm代替npm

6. 解決每次修改需要重新打包的問題：使用webpack-dev-server包
   1. 安裝方法：執行npm i webpack-dev-server -D
   2. 需要注意的問題：webpack-dev-server和webpack、webpack-cli存在版本不相容的問題，會報一個錯

   - npm run server後會報錯：Cannot find module 'webpack-cli/bin/config-yargs'
    
   

   這就是版本不相容問題造成的，我使用的版本為
   

   3. 配置webpack-dev-server：在package.json中的scripts中配置，

   

   4. 配置好後在終端執行npm run dev即可，這樣就可以每次修改之後自動打包

注意點：

1. webpack的約定的入口檔案是index.js，不是main.js。在webpack4.x中，有一個很大的特性，就是約定大於配置，約定預設的打包入口檔案的路徑是 src->index.js，輸出檔案為dist->main.js
2. webpack-dev-server自動打包的時候把生成的main.js託管到了記憶體中，這樣訪問比較快，但是index.html沒有託管，所以可以利用一個外掛HtmlWebPackPlugin
   將首頁託管到記憶體中
3. 在打包之前，新建一個webpack.config.js指定mode,mode有兩種取值，
   development
   production ：比較小