const path = require('path');//引入路徑包
const HWP = require('html-webpack-plugin');//引入自動產出html包
const CWP = require('clean-webpack-plugin');//引入清除檔案包
const webpack = require('webpack');//引入webpack，做熱更新用
//const etwp = require('extract-text-webpack-plugin');
const mcep = require('mini-css-extract-plugin');//引入分離css包
 

const copywp = require('copy-webpack-plugin');//引入拷貝外掛

let obj = {
    /*
    webpack4.0需要配置依賴:
        開發依賴->mode:'development'
        生產依賴->mode:'production'
    */
    mode:'development',//配置開發依賴
    //入口檔案
    entry:{
        './index.html'//目的為了解析某些指定檔案，最終編譯成能在瀏覽器執行的檔案
    },
    //出口檔案（取個名字放在build資料夾下面）
 

    output:{
        path:path.resolve(__dirname,'build'),//指定打包後的資料夾
        filename:'[name].[hash:6].js'//給指定的檔名字加上6位雜湊
    },
    //利用loader模組轉換器分離css
    module:{
        rules:[
           {
                 /*在根目錄下找.css結尾的檔案，把他們打包出來 */
                test:/\.css$/,//匹配所有以.css結尾的
                use:[
                    
 
//使用css分離就用mini-css-extract-plugin
                    {
                        loader.mcep
                    },
                    'css-loader'//使用css-loader
                ]
            }，
            //處理css中圖片
            {
                test:/\(jpg|png|gif|svg|ttf|eot|woff|bmp)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:4096,//圖片大小
                            outputPath:'../images',//指定打包後的圖片位置
                            publicPath:'/images'//原來的圖片位置
                        }
                    }
                ]
            }
            
        ]
    }
    //引入擴充套件外掛
    plugins:[
        //清除檔案外掛  
        new CWP({
            ['build']//清除打包後多餘的js（必須放在html檔案上面）
        }),
         //分離css外掛  
        new mcep({
            filename:'1.css'
        }),
         //自動產出html外掛  
        new HWP({
            template:'./index.html'//模板檔案,
            
            //對檔案進行壓縮
            minify:{
                removeAttributeQuotes:true,//去掉屬性雙引號
                collapseWhitespace:true//將檔案壓縮成一行
            },
            /*
                設定檔案的title
                用模板引擎配合使用,<%= htmlWebpackPlugin.options.title>
            */
            title:'歡迎來到webpack4.0',
            hash:true,//給產出的檔案加上hash，避免快取
            //提取程式碼中的公共模組，然後將其打包到獨立的檔案中
            chunks:['index','index1']
            
        }),
        //熱更新外掛
        new webpack.HotModuleReplacementPlugin()//熱更新模組
    ],
    //配置開發伺服器
    devServer:{
        //配置開發服務執行時檔案根目錄（該配置可以省略）
        contentBase:path.resolve(__dirname,'build'),
        host:'localhost', //伺服器監聽的主機地址
        compress:true, //伺服器是否啟動壓縮
        port:80, //伺服器監聽的埠
        open:true, //自動開啟瀏覽器 可不寫
        hot:true//熱更新，區域性重新整理
    }
    
}
module.exports = obj;//匯出obj

*** extract-text-webpack-plugin預設安裝的是3.0.2不支援webpack4.0
    所以使用mini-css-extract-plugin 支援webpack4.0