<!--
 * @Author: 莫靓仔
 * @description: 文件描述
 * @Date: 2021-09-14 19:13:52
 * @LastEditors: 莫靓仔
 * @LastEditTime: 2021-09-14 19:13:52
-->
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 用于在构建前清除dist目录中的内容
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
// var minify = {
//     // 对html文件进行压缩
//     // 去掉属性的双引号
//     removeAttributeQuotes: true,
//     // 去掉注释
//     removeComments: true,
//     // 去掉空白
//     collapseWhitespace: true
// }
module.exports = {
    // 入口
    entry: {
        // 页面1
        index: './js/main.js',
        // 页面2
        dashboard: './js/main.js',
        // 页面3
        dashboardIndex: './js/main.js'
    },
    // 出口
    output: {
        // 项目的打包文件路径
        path: path.resolve(__dirname, './dist'),
        // 打包后的文件名
        filename: 'js/[name]/[name]-bundle.js'
    },
    module: {
        rules: [
            {
                // css文件打包
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 图片
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader?limit=8192&name=images/[hash:8].[name].[ext]']
            },
            {
                // 字体
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader?limit=8192&name=font/[hash:8].[name].[ext]']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            inject: 'body', //js插入的位置，true/'head'/'body'/false,

            chunks: ['index'],
            minify: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dashboard.html',
            template: './dashboard.html',
            inject: 'body', //js插入的位置，true/'head'/'body'/false,

            chunks: ['dashboard'],
            minify: false
        }),
        new HtmlWebpackPlugin({
            filename: 'dashboardIndex.html',
            minify: false,
            template: './dashboard/index.html',
            inject: 'body', //js插入的位置，true/'head'/'body'/false,
            chunks: ['dashboardIndex']
        }),
        // 打包成单独css
        new ExtractTextPlugin({
            filename: 'css/[name].css'
        }),
        // 清除dist构建目录文件
        new CleanWebpackPlugin()
        // new ExtractTextPlugin({
        //     // filename: getPath => {
        //     //     return getPath('css/[name].css').replace('css/js', 'css')
        //     // },
        //     filename:'css/[name].css',
        //     // allChunks: true
        // })
    ],
    mode: 'development',
    devServer: {
        open: true,
        // 端口号
        port: 5501,
        // 是否压缩
        compress: true,
        // 当前目录
        contentBase: path.join(__dirname, './'),
        // dev启动时候打开指定页面
        openPage: './index.html'
    }
}

// todo 以下网上找的配置，待测试
// var path = require('path')

// var webpack = require('webpack')

// var autoprefixer = require('autoprefixer')

// var HtmlWebpackPlugin = require('html-webpack-plugin')

// var ExtractTextPlugin = require('extract-text-webpack-plugin')

// module.exports = {
//     entry: {
//         //配置入口文件，有几个写几个
//         index: './index.js',
//         // 页面2
//         dashboard: './dashboard.js',
//         // 页面3
//         dashboardIndex: './dashboard/index.js'
//     },
//     output: {
//         path: path.join(__dirname, 'public'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
//         publicPath: '/public/', //模板、样式、脚本、图片等资源对应的server上的路径
//         filename: 'js/[name].js', //每个页面对应的主js的生成配置
//         chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
//     },

//     devServer: {
//         open: true,
//         // 端口号
//         port: 5501,
//         // 是否压缩
//         compress: true,
//         // 当前目录
//         contentBase: path.join(__dirname, 'dist'),
//         // dev启动时候打开指定页面
//         openPage: './index.html'
//     },

//     module: {
//         rules: [
//             {
//                 test: /\.js$/,
//                 loader: 'babel-loader?presets=es2015'
//             },
//             {
//                 test: /\.css$/,
//                 use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader'] })
//             },
//             {
//                 test: /\.less/,
//                 use: ExtractTextPlugin.extract({
//                     fallback: 'style-loader',
//                     use: ['css-loader', 'autoprefixer-loader', 'less-loader']
//                 })
//             },
//             {
//                 //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//                 //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
//                 test: /\.html$/,
//                 loader: 'html-loader?attrs=img:src img:data-src'
//             },
//             {
//                 //文件加载器，处理文件静态资源
//                 test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
//                 loader: 'file-loader?name=./fonts/[name].[ext]'
//             },
//             {
//                 //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
//                 //如下配置，将小于8192byte(8KB)的图片转成base64码
//                 test: /\.(png|jpg|gif)$/,
//                 loader: 'url-loader?limit=8192&name=./img/[hash:5].[ext]'
//             }
//         ]
//     },

//     externals: {
//         // 遇到require这些时, 不需要再编译. 适合那些常用的库, 已经在页面通过
//         jquery: 'jQuery'
//     },
//     plugins: [
//         // new webpack.ProvidePlugin({ //加载jq
//         // $: ‘jquery’,
//         // jQuery: ‘jquery’
//         // }),
//         new webpack.optimize.CommonsChunkPlugin({
//             name: 'ymsj', // 将公共模块提取，生成名为`ymsj`的chunk
//             chunks: 'all', //提取哪些模块共有的部分
//             minChunks: 3 // 提取至少3个模块共有的部分
//         }),
//         new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
//         // new HtmlWebpackPlugin({
//         //     //根据模板插入css/js等生成最终HTML
//         //     favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
//         //     filename: './view/index.html', //生成的html存放路径，相对于path
//         //     template: './src/view/index.html', //html模板路径
//         //     inject: 'body', //js插入的位置，true/’head’/’body’/false
//         //     hash: true, //为静态资源生成hash值
//         //     chunks: ['ymsj', 'index'], //需要引入的chunk，不配置就会引入所有页面的资源
//         //     minify: {
//         //         //压缩HTML文件
//         //         removeComments: false, //移除HTML中的注释
//         //         collapseWhitespace: false //删除空白符与换行符
//         //     }
//         // }),
//         // new HtmlWebpackPlugin({
//         //     //根据模板插入css/js等生成最终HTML
//         //     favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
//         //     filename: './view/list.html', //生成的html存放路径，相对于path
//         //     template: './src/view/list.html', //html模板路径
//         //     inject: true, //js插入的位置，true/’head’/’body’/false
//         //     hash: true, //为静态资源生成hash值
//         //     chunks: ['ymsj', 'list'], //需要引入的chunk，不配置就会引入所有页面的资源
//         //     minify: {
//         //         //压缩HTML文件
//         //         removeComments: true, //移除HTML中的注释
//         //         collapseWhitespace: false //删除空白符与换行符
//         //     }
//         // }),
//         // new HtmlWebpackPlugin({
//         //     //根据模板插入css/js等生成最终HTML
//         //     favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
//         //     filename: './view/article.html', //生成的html存放路径，相对于path
//         //     template: './src/view/article.html', //html模板路径
//         //     inject: true, //js插入的位置，true/'head'/'body'/false
//         //     hash: true, //为静态资源生成hash值
//         //     chunks: ['ymsj', 'article'], //需要引入的chunk，不配置就会引入所有页面的资源
//         //     minify: {
//         //         //压缩HTML文件
//         //         removeComments: true, //移除HTML中的注释
//         //         collapseWhitespace: false //删除空白符与换行符
//         //     }
//         // }),
//         new HtmlWebpackPlugin({
//             filename: 'index.html',
//             template: './index.html',
//             inject: 'body', //js插入的位置，true/'head'/'body'/false,
//             chunks: ['index']
//             // minify
//         }),
//         new HtmlWebpackPlugin({
//             filename: 'dashboard.html',
//             template: './dashboard.html',
//             inject: 'body', //js插入的位置，true/'head'/'body'/false,
//             chunks: ['dashboard']
//             // minify
//         }),
//         new HtmlWebpackPlugin({
//             filename: 'dashboardIndex.html',
//             // minify,
//             template: './dashboard/index.html',
//             inject: 'body', //js插入的位置，true/'head'/'body'/false,
//             chunks: ['dashboardIndex']
//         }),
//         new webpack.BannerPlugin('白山羊案例V2.0.0 2017-9 Wginit '),
//         new webpack.optimize.OccurrenceOrderPlugin(),
//         new webpack.optimize.UglifyJsPlugin(),
//         new webpack.HotModuleReplacementPlugin() //热加载
//     ]
//     // mode:'development'
// }
