從0開始學習Webpack（一）

第一步： 新建一個專門用於學習Webpack的資料夾 在該資料夾內執行 npm init -y 然後執行webpack安裝命令 npm install -D webpack webpack-cli 新建目錄結構 src 以及src下的檔案如圖所示

index.js：

a.js：

第二步：手動配置webpack 要手動配置webpack ，需要新建一個webpack.config.js檔案 config檔案包括的基礎資訊需要打包的入口以及出口，基礎配置如下，

let path = require("path") //node的內建模組 

module.exports ={
    mode : 'development',
    entry: './src/index.js', // 入口檔案,
    output: {
        filename: 'bundle.js', //打包後的檔名
        path: path.resolve(__dirname,'dist') //打包後的路徑（必須是絕對路徑），dirname表示的是當前目錄下，dist表示資料夾
    }
}
複製程式碼

其中出口（output）的path需要引用絕對路徑 path是node的內建模組，path.resolve()即可提供絕對路徑

第三步：執行打包命令 npx webpack , webpack目錄資料夾下即生成了 dist目錄，以及bundle.js ，至此打包完成 ，新建任意html檔案，引用bundle.js,就可以檢視執行結果。