const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 拆分css樣式的外掛
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

function resolve (dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {
    mode:'development',
    // entry:['babel-polyfill','./main.js'],//可以有多個入口檔案
    entry:{
        babelPolyfill:'babel-polyfill',//添加了這個東西，才能完美的將ES6轉碼,否則Babel預設只轉換新的JavaScript句法（syntax），而不轉換新的API，如：Set Map
        app:'./main.js',//可以有多個入口檔案
    },
    output:{
        path:path.resolve(__dirname,"dist"),//輸出檔案路徑    path:path.join(__dirname,"dist","js")
        filename:"./js/[name].bundle.js",//"[name].[chunckhash].bundle.js"    輸出的檔名稱
    },
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.js', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    },
    //在webpack4之前，提取公共程式碼都是通過一個叫CommonsChunkPlugin的外掛來辦到的。到了webpack4以後，內建了一個一模一樣的功能，就是所謂的“優化”
//    optimization: {  // 提取公共程式碼
//         splitChunks: {
//             cacheGroups: {
//                 vendor: {   // 剝離第三方外掛
//                     test: /node_modules/,   // 指定是node_modules下的第三方包
//                     chunks: 'initial',
//                     name: 'vendor',  // 打包後的檔名，隨意命名    
//                     priority: 10    // 設定優先順序，防止和自定義的公共程式碼提取時被覆蓋，不進行打包
//                 },
//                 utils: { // 抽離自己寫的公共程式碼，utils這個名字可以隨意起
//                     chunks: 'initial',
//                     name: 'utils',  // 任意命名
//                     minSize: 0    // 只要超出0位元組就生成一個新包
//                 }
//             }
//         }
//     },
    performance: {
        hints: "warning", // 列舉
        maxAssetSize: 30000000, // 整數型別（以位元組為單位）
        maxEntrypointSize: 50000000, // 整數型別（以位元組為單位）
        assetFilter: function(assetFilename) {
        // 提供資原始檔名的斷言函式
        return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        
        }
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude: /node_modules/,//有變化了處理，沒有變化則不處理
                // include:[resolve('src'), resolve('test')],//需要處理的資料夾
                loader:"babel-loader"
            },
            {
                test:/\.css$/,
                // loader:"style-loader!css-loader",
                use: ExtractTextWebpackPlugin.extract({
                    // 將css用link的方式引入就不再需要style-loader了
                    fallback: "style-loader",
                    use:[
                        {loader:'css-loader',options:{importLoaders:1}},
                        'postcss-loader', 
                    ],
                    publicPath: './css'       
                })
                // use: [ //以行內樣式style的標籤寫進打包後的html頁面中
                //     {
                //         loader: "style-loader"
                //     }, 
                //     {
                //         loader: "css-loader",
                //         options: {
                //             modules: true, // 指定啟用css modules
                //             localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                //         }
                //     },
                //     {
                //         loader: "postcss-loader"
                //     }
                // ]
            },
            {
                test:/\.less$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:[
                        {loader:'css-loader',options:{importLoaders:1}},
                         'postcss-loader', 
                         'less-loader'
                    ],
                    publicPath: './css'   
                  }),
                  exclude: path.resolve(__dirname,'./node_modules')
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: "[name].[hash:5].[ext]",
                  outputPath: "./images",//打包後圖片檔案輸出路徑
                  publicPath:'../images'
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: 'media/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 10000,
                  name: 'fonts/[name].[hash:7].[ext]'
                }
            },
            { //頁面中經常會用到img標籤，img引用的圖片地址也需要一個loader來處理,這樣再打包後的html檔案下img就可以正常引用圖片路徑了
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            }
        ]
    },
    plugins:[
        // 打包前先清空
        //new CleanWebpackPlugin('dist/*.*') ,
        new ExtractTextWebpackPlugin({ //樣式檔案單獨打包
            filename: "./css/app.css",  //指定生成的檔名稱
            disable: false,  //是否禁用此外掛
            allChunks: true
          }),
        new HtmlWebpackPlugin({
            template:"./index.html",//本地模板檔案的位置，支援載入器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；
            filename: './index.html',//輸出檔案的檔名稱，預設為index.html，不配置就是該檔名；此外，還可以為輸出檔案指定目錄位置（例如'html/index.html'）
            title: 'Webpack App',//生成的html文件的標題
            chunks:["app"],
            inject:true,//1、true或者body：所有JavaScript資源插入到body元素的底部2、head: 所有JavaScript資源插入到head元素中3、false： 所有靜態資源css和JavaScript都不會注入到模板檔案中
            showErrors:true,//是否將錯誤資訊輸出到html頁面中
            hash:true,//是否為所有注入的靜態資源新增webpack每次編譯產生的唯一hash值
            minify: false,//傳遞 html-minifier 選項給 minify 輸出
            favicon: "",//新增特定的 favicon 路徑到輸出的 HTML 檔案中。
        }),
    ],
    devServer: {
        publicPath: '/',//
        contentBase: path.resolve(__dirname, 'dist'),//此處的路徑必須和輸出output檔案的路徑一致 否則無法自動更新，或者是基於output的相對路徑
        compress: true,
        historyApiFallback: true,//在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設定為true，所有的跳轉將指向index.html
        inline: true,//設定為true，當原始檔改變時會自動重新整理頁面
        // grogress: true,
        host: 'localhost',// 預設是localhost
        port: 9000,//指定用於偵聽請求的埠號
        open:true,//當open啟用時，開發伺服器將開啟瀏覽器。
        //hot: true,// 開啟熱更新，開啟熱載入還需在主入口js檔案中配置
        // openPage:'index.html',//指定在開啟瀏覽器時導航到的頁面。
        overlay: {//當存在編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋,顯示警告和錯誤：
            warnings: true,
            errors: true
        },
        proxy: {//代理配置
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: {'^/api' : ''},//如果不想/api傳遞，我們需要重寫路徑
            }
        },
        
    }
}