const path = require('path');

//清理dist
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

//清理LISENCE.txt
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const TerserPlugin = require("terser-webpack-plugin");

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

//构造一个函数以便处理多页，返回一个对象
var getHtmlConfig = function(name){
  return {
      template : './src/view/' + name + '.html',
      filename : 'view/' + name + '.html',
      inject   : true,
      hash     : true,
      chunks   : ['common' , name],//告知使用两个
      minify   : {
          collapseWhitespace : false
      }
  }
}

var config = {
     entry: {
      'common'        :['./src/page/common/index.js'],  
      'index'         :['./src/page/index/index.js'],
      'user-login'    :['./src/page/user-login/index.js'],
      'catalog-main'  :['./src/page/catalog-main/index.js']
     },
     output: {
       filename: 'js/[name].js',
       path: path.resolve(__dirname, 'dist')
     },

     devServer : {
      port : 8888,
      contentBase : path.resolve(__dirname, 'dist')
     },
     module:{
      rules : [
        
        //css相关    
        {test : /\.css$/, 
            use: [
                  {
                    loader : MiniCssExtractPlugin.loader,
                    options : {publicPath : '../'}
                  },
                  {
                    loader: 'css-loader',
                    options: {
                        esModule: false,
                        importLoaders: 1
                    }
                 }
                ]
        },

        //图片相关
        {
          test : /\.(png|svg|jpg|gif)$/, 
          use : {
            loader : 'url-loader',
            options : {
                name : 'images/[name].[ext]',
                limit : 10,
                esModule : false
            }
          }
        },
                    
        //用loader处理.htm文件
        {
          test : /\.htm$/,
          use  : {
              loader : 'html-loader',
              options : {
                  esModule : false,
                  minimize : false
              }
          } 
        }        
        
                 
      ]                 
     },
     
     
     plugins :[
       //new CleanWebpackPlugin(),
       new MiniCssExtractPlugin({
        filename : 'css/[name].css'
       }),
       new HtmlWebpackPlugin(getHtmlConfig('index')),
       new HtmlWebpackPlugin(getHtmlConfig('user-login')),
       new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
       //热替换
       new webpack.HotModuleReplacementPlugin()
     ],

     optimization: {
        
      minimize: false,
      minimizer: [
          new TerserPlugin({
            extractComments: false,//不将注释提取到单独的文件中
          }),
        ],
        
      splitChunks : {
        cacheGroups : {
            commons : {
                 name        : 'util',
                 chunks      : 'initial',
                 minChunks   : 2,
                 minSize     : 0
              }
          }
      }
    },

    externals : {
        'jquery' : 'window.jQuery'
    },

    resolve : {
      alias : {
        util            : __dirname + '/src/util',
        page            : __dirname + '/src/page',
        images          : __dirname + '/src/images',
        service         : __dirname + '/src/service',
        node_modules    : __dirname + '/node_modules'
        
      }
    }

};

module.exports = config;