前端框架Vue、React，底層都是基於webpage來配置的。

實際開發中使用的官方腳手架都是配置好了的，但是官方腳手架配置很基礎，需要我們後面在這個基礎上去拓展和配置。比如配置代理，配置css模組化，配置自定義載入load等。

面試也會問，你配置了webpack的哪些選項了。

【Webpack基礎介紹】

webpack 是一個模組打包器(也叫自動化構建工具)。webpack 的主要目標是將 Javascript 檔案打包在一起，打包後的檔案用於在瀏覽器中使用。

但它也能夠勝任轉換(transform)、打包(bundle) 或包裹(package) 任何資源(resoure or asset)。

webpack中文官網：https://www.webpackjs.com/

可以做的事情：

1、程式碼轉換     =>es6轉es5。瀏覽器一般要相容IE9以上，但是IE不支援es6

2、檔案優化     =>

3、程式碼分割     =>

4、模組合併     =>

5、自動重新整理     =>

6、程式碼校驗     =>

7、自動釋出     =>

【Webpack基本配置】

(命令基於node,所以需要安裝node)

1、進入專案目錄生成package.json檔案     npm  init

2、安裝webpack和webpack-cli(腳手架)     npm  install  --save-dev  webpack  webpack-cli

3、執行命令   npx webpack

4、配置package.json檔案

"scripts":{
    "build":"webpack --config webpack.config.js"
}

      執行： npm run build

 【Webpack配置入口檔案和打包後的檔案】

 根目錄建立webpack.config.js檔案  =>這是入口檔案

//獲取路徑
let path=require('path');//webpack是node寫出來的使用node語言(可使用node語言)。這是先匯入一個path模組
//console.log(path.resolve('dist'));
 

//module.exports這是匯出。要符合config.js規範
module.exports={
    mode:'production'//模式，預設兩種production(生產環境：程式碼壓縮)，development(開發環境：程式碼不壓縮)
    entry:'./src/index.js',//入口
    output:{
        filename:"bundle.js",//打包後的檔名
        path:path.resolve('dist')//路徑必須是一個絕對路徑
    }
}

       執行： npm run build

【程式碼演示】