const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');//css3有些属性是需要加兼容性前缀的
const miniCssExtractPlugin = require('mini-css-extract-plugin');//将css打包成一个单独的文件，而不是直接将css放入到内部样式中
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css代码
const CleanWebpackPlugin = require('clean-webpack-plugin');//貌似是删除上一次压缩打包的代码
//注意：上面引入的全部都是插件的模块，所有的loader是不用引入的，安装了就直接能使用的

const config = {
  mode: 'production', //production//development//none
  entry: {
  	index: path.resolve(__dirname, './src/js/index.js'),
    list: path.resolve(__dirname, './src/js/list.js')
    
  },
  output: {
  	path: path.resolve(__dirname + '/dist'),
  	filename: 'js/[name].js'
  },
  module: {
  	rules: [
      {
      	test: /\.js$/,
      	loader: 'babel-loader',
      	exclude: path.resolve(__dirname, 'node_modules'),
      	query: {
      		'presets': ['latest']
      	}
      },

      {
      	test: /\.tpl$/,
      	loader: 'ejs-loader'
      },

      {
        test: /\.scss$/,
        use: [
           {//打包成单独的外部样式表文件
           	loader: miniCssExtractPlugin.loader,
	          options: {
	        	  hmr: process.env.NODE_ENV === 'development'
	          }
	        },
	        //'style-loader',//打包成内部样式表，与上面那个（打包成外部样式文件的）二者只可留一
	        'css-loader',
	        {
	        	loader: 'postcss-loader',//这个loader里面就可以配置autoprefixer
	        	options: {
	        		plugins: function () {
	        			return [autoprefixer('last 5 versions')]//最近的五个版本的浏览器都要做一个兼容性的前缀
	        		}
	        	}
	        },
	        'sass-loader'
        ]
      },

      {
        test: /\.css$/,
        use: [
           {//打包成单独的外部样式表文件
            loader: miniCssExtractPlugin.loader,
	          options: {
	        	  hmr: process.env.NODE_ENV === 'development'
	          }
	        },
          //'style-loader',
          'css-loader',
          {
	        	loader: 'postcss-loader',
	        	options: {
	        		plugins: function () {
	        			return [autoprefixer('last 5 versions')]
	        		}
	        	}
	        },
        ]
      },

      {
      	test: /\.(png|jpg|jpeg|gif|ico)$/i,
      	loader: [
          'url-loader?limit=1024&name=img/[name]-[hash:16].[ext]',//1024以下的图片，处理成base64来处理，1024以上就不处理它，
          'image-webpack-loader'//这个loader如果加载不成功可以把它删了，它主要是再次压缩图片的
      	]
      },

      {
        test: /\.(woff2?|eot|ttf|oft|svg)(\?.*)?$/i,
        loader: [
          'url-loader?name=fonts/[name].[ext]'
        ]
      }
  	]
  },

  // 解决webpack打包时，一直报错："Entrypoint undefined = index.html"的问题
  stats: {
    // One of the two if I remember right
    //entrypoints: false,
    children: false
  },

  plugins: [
    new uglify(),//压缩js代码
    new OptimizeCssAssetsPlugin({}),//压缩css代码
    new htmlWebpackPlugin({//配置页面的，有多个页面就new多次就可以了
      minify: {
      	removeComments: true,//移除注释
      	collapseWhitespace: true//移除空格/转行
      },
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      title: '腾讯课堂JS++课程首页',
      chunksSortMode: 'manual',//加载脚本的顺序，manual表示手动的意思
      chunks: ['index'],
      excludeChunks: ['node_modules'],
      hash: true//脚本引入的时候，名称后面叫一个问号和一串哈希值，目的是清缓存，防止更新了文件却没有生效的现象
    }),
    new htmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'list.html',
      template: path.resolve(__dirname, 'src/list.html'),
      title: '腾讯课堂JS++课程列表页',
      chunksSortMode: 'manual',
      chunks: ['list'],
      excludeChunks: ['node_modules'],
      hash: true
    }),

    new miniCssExtractPlugin({
    	filename: 'css/[name].css'
    }),

    // new CleanWebpackPlugin({//貌似是再一次进行压缩打包时，删除上一次压缩打包的代码
    //   cleanOnceBeforeBuildPatterns: ['dist/js','dist/*.html','dist/img']
    // }),
  ],


  devServer: {
  	watchOptions: {
  		ignored: /node_modules/,//当/node_modules/有变化时，devServer是是要忽略它的，不监控它的
    },
    open: true,//打包压缩后直接打开默认浏览器，方便了我们开发
    //openPage: 'app.html',//根目录没index.html的情况下可以设置这个为默认打开的页面
    hot: true,//热更新 不刷新页面更新信息
    //overlay: true,//表示将错误呈现到页面上去展示
    //inline: true,//页面上会有一个状态条，一般不设置(就是为true)
  	host: 'localhost',//主机
  	port: 3200//端口号
  }
};

module.exports = config;