webpack安裝與基本配置（一）

1.假設你已經有了一個需要打包的專案，那麼我們開始以下操作

2.在src目錄下新建一個webpack的配置檔案叫做webpack.config.js

說明：

這個檔名可以修改，但是跟配置webpack執行的屬性值直接相關，否則會報錯

專案結構：

3.配置 webpack.config.js 檔案

程式碼如下

 	const path = require('path');
 	module.
 
exports = {   
 		entry:"./src/main.js",                   //即專案入口檔案的路徑，
 		output:{                  	                 //a.生成的新的js檔案會存在在哪個位置
 			 path: path.resolve(__dirname,'dist') ,            //這裡需要一個絕對路徑，因此引用了path這個模組   __dirname代表專案的總目錄（src的上級目錄），dist是檔案匯出後所要存在的資料夾名
 			filename:"main.js"   	//b.生成的新的js檔案叫什麼名字
 

 			    }
 			};
 			
 	//module.exports是node.js的語法 ，這裡就是webpack的配置 比如webpack會以書面方式來打包，打包的過程中它會做一些什麼事情
    //在這個匯出物件中，至少需要設定兩個屬性： 
  //  entry： 這個就是我們整個專案的入口，找到入口檔案之後他會打包出一份新的檔案，所以還需要設定一個關於出口檔案（output）的屬性

3.安裝wepack

1. 初始化 package.js檔案 命令：npm init -y ====>執行之後，再src下會自動新建一個package.jison的檔案;

2. 安裝專案開發所需要的相關依賴 命令 ： npm i -D webpack ====>執行之後，跟src同級會自動生成一個node_modulesd的檔案，在src下會自動生成一個package-lock.json;

3. webpack 4.0以及之後的版本還需要安裝 webpack-cli（目前3相對比較穩定，3不需要安裝這些） 命令： npm i -D webpack-cli

4. 在webpack.config.js檔案的module.export中配置生成環境和開發環境的相關屬性（4.0以上的版本）

5. mode:" development " ( development:開發環境 production：生產環境)

4. 配置webpack執行命令

在package.js檔案中找到script屬性，新增 “dev”: “webpack”
這塊預設執行webpack.config.js這個檔案，配置好之後，就可以直接用命令列運行了 命令：npm run dev
執行之後，在我們設定的dist（執行webpack之後，新生成檔案所存放的資料夾）檔案下，就可以看到我們打包好新生成的js檔案了