const {merge} = require('webpack-merge');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpackBundleAnalyzer = require('webpack-bundle-analyzer');
const miniCssPlugin = require('mini-css-extract-plugin'); //用于将css打包到html外，提高加载速度
const configWebpack = require('./webpack.config.js');
const path = (name) => require('path').resolve(__dirname, name); //获取绝对路径

/**
 * webpack的生产环境配置文件
 * 中文文档：https://www.webpackjs.com/concepts/
 * @param env Node的环境变量：process.env。注意：webpack打包是在node环境中运行的。
 */
module.exports = (env) => {
  let publicParam = require('./config/config.js')(env); //项目的公共配置
  const modifyVars = require('./config/configTheme.js'); //antd的主题定制

  /**
   * 打包环境。会将process.env.NODE_ENV的值设为production，启用UglifyJsPlugin等插件。
   * 注意：如果optimization.minimizer非空，则需要手动设置UglifyJsPlugin。
   */
  let mode = 'production';

  //对模块的源代码进行转换。注意：webpack自身只理解JavaScript。
  let module = {
    //解析规则
    rules: [
      {
        test: /\.jsx?$/, //需要解析的文件类型
        include: [path('src'), path('node_modules/asn1.js/lib')], //需要解析的文件目录
        loader: 'babel-loader' //解析器
      },
      {
        test: /\.(css|less)$/, //加载less文件：用于antd主题定制
        include: /node_modules/,
        use: [
          {
            loader: miniCssPlugin.loader, //用于将css打包到html外，提高加载速度
            options: {publicPath: '../'} //指定相对路径
          },
          'css-loader', //处理css文件：解释并引用css中的@import和url()
          'postcss-loader', //处理css文件：自动补全webkit前缀等
          {
            loader: 'less-loader', //将less文件转为css文件
            options: {
              lessOptions: {
                modifyVars,
                javascriptEnabled: true //必须为true
              }
            }
          }
        ]
      },
      {
        test: /\.s?css$/, //加载css、scss文件
        include: path('src'),
        use: [
          {
            loader: miniCssPlugin.loader, //用于将css打包到html外，提高加载速度
            options: {publicPath: '../'} //指定相对路径
          },
          'css-loader', //处理css文件：解释并引用css中的@import和url()
          'postcss-loader', //处理css文件：自动补全webkit前缀等
          'sass-loader' //将scss文件转为css文件
        ]
      }
    ]
  };

  //插件
  let plugins = [
    //用来自动清空打包目录
    new CleanWebpackPlugin(),
    //用来复制文件，将webpack不打包的文件复制到打包目录
    new copyWebpackPlugin({
      patterns: [{from: path('public'), to: path(publicParam.fileName + '/public')}]
    }),
    //生成打包分析文件
    new webpackBundleAnalyzer.BundleAnalyzerPlugin({analyzerMode: 'static'}),

    new miniCssPlugin({filename: 'css/[name].[hash:8].css'}),
    //html加载插件
    new htmlWebpackPlugin({
      //项目名称
      title: publicParam.title,
      //Html模板
      template: './public/index.html',
      //注入打包后生成的文件
      inject: true,
      //压缩配置
      minify: {
        removeComments: true, //是否移除注释
        collapseWhitespace: true, //是否去掉空白
        removeAttributeQuotes: true //是否去掉属性引号
      }
    })
  ];

  //生产环境配置参数
  let config = {mode, module, plugins};
  return merge(configWebpack(env), config);
};