認識webpack以及基本安裝:https://webpack.docschina.org/

webpack能幹什麼？

壓縮檔案：將檔案壓縮，節省上傳的頻寬，優化網速

優化程式碼：去除無用的程式碼、空格，還可以去除註釋等，讓瀏覽器解析程式碼速度更快

語法檢查：處理程式碼在瀏覽器版本相容性問題：例如老版本瀏覽器並不支援css3,es6的語法，

webpack的配置檔案，預設檔名為webpack.config.js

以下是webpack檔案的一些基本配置：

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    /*1、entry入口檔案，告訴webpack從哪個檔案開始打包，分析構建內部依賴圖*/
    /*單個入口*/
    entry:'./src/index.js', 
    /*多個入口*/
    /*陣列的方式，將多個入口檔案打包到一個檔案中,一共就生成一個bundle
    entru:['','']*/
    /*物件的方式，有幾個入口就會生成幾個chunk,並輸出幾個bundle,生成的檔名就是物件的下標名（one、two）.js,需要將output下的filename:'xxxx.js'改成filename:'[name].js'
    entry:{
        one:'./src/index.js',
        two:'./src/main.js'
    }*/
    /*特殊用途,以下會將'./src/index.js,./src/main.js'這倆個檔案打包到一個bundle中，檔名對應下標名；並且將'./src/index.js'這個入口檔案打包到單獨的bundle檔案中。
    entry:{
        onea:['./src/index.js','./src/main.js'],
        twob:'./src/index.js'
    }
    */
    /*2、output打包好的檔案，指示webpack將打包好的貨源存放的位置，以及檔名字*/
    output:{                
        filename:'build.js',
        path:resolve(__dirname,'build')
    },
    /*3、loader處理非javascript檔案（css,img等），處理成webpack能夠識別的貨源，像是翻譯的一個過程 */
    module:{
        rules:[]
    },
    /*4、plugins外掛可用於執行範圍更廣的任務，包括打包優化和雅俗，需要哪個功能就匯入那種外掛 */
    plugins:[
        /*  使用html打包外掛,先下載，接著require引入外掛，然後使用
            new HtmlWebpackPlugin()
            預設會建立一個空的html檔案，目的就是自動引入打包資源
        */
        /*如果想指定要打包的html檔案*/
        new HtmlWebpackPlugin({
            template:'./src/index.html',    /*使用template屬性指定html檔案*/
            filename:'demo.html',           /*指定打包好的html檔名*/
            /*壓縮html程式碼*/
            minify:{
                /*移除空格*/
                collapseWhitespace:true,
                /*移除註釋*/
                removeComments:true
            }
        })
    ],
    /*mode模式：生產模式(production),開發模式(development)*/
    mode:'production'
}