const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // html文件中插件js打包文件
const ExtractTextPlugin = require("extract-text-webpack-plugin"); // css代码分离到独立文件
const CleanWebpackPlugin = require("clean-webpack-plugin"); // dist目录清理

const extractSass = new ExtractTextPlugin({
  filename: "style-[hash].css"
});

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-[hash].js'
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.scss$/,
      use: extractSass.extract({
        use: [{
          loader: "css-loader",
          options: {
            sourceMap: true
          }
        }, {
          loader: "sass-loader",
          options: {
           sourceMap: true
           }
        }],
        // 在开发环境使用 style-loader
        fallback: "style-loader"
      })
    }, {
      test: /\.js$/,            // 处理js文件
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader'
      }
    }, {
      test: /\.png$/,  // 处理图片文件
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240, // byte为单位，当前配置为转换10kb以下文件
          name: 'img/[hash:8].[name].[ext]'
        }
      }
    }]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']), // 清理dist目录
    extractSass,                      // 提取css文件
    new HtmlWebpackPlugin({          // 将构建文件自动加入html文件中
      template: './src/index.html'
    })
  ],
  optimization: {  // 提取第三方库，js文件打包
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  }
};


// js打包处理
// js第三方库文件提取
// css sass 文件处理
// css独立文件提取
// 开发、测试、生产不同环境处理
// 图片（其它文件）处理
// 自动添加html文件，开发模式下并不会在dist目录下生成文件
// hot-server
// html模板文件生成


// 开发、测试、生产环境参数配置
// sourcemap

// 其它css扩展语言处理
// typescript支持

// 其它文件，如字体文件处理
// ployfill?