const webpack = require('webpack');
const {merge} = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
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的值设为development。启用NamedChunksPlugin和NamedModulesPlugin。
  let mode = 'development';
  //调试工具：用来追踪源代码。source-map是最详细的。
  let devtool = 'source-map';
  //配置webpack服务器的参数
  let devServer = {
    //热替换，当本地文件更新后，浏览器页面自动刷新
    hot: true,
    //使用https协议，默认为false。
    https: false,
    //启动服务后，自动打开页面
    open: true,
    //显示打包进度
    progress: false,
    //用于定位打包报错
    profile: true,
    /**
     * 指定主机，默认为localhost（即'127.0.0.1'）。
     * 默认无法通过ip地址访问webpack服务，除非指定host为‘0.0.0.0’或ip地址。
     * ‘0.0.0.0’代表任意地址。指定host为‘0.0.0.0’时，还可以通过localhost或ip地址访问webpack服务。
     * 注意：在window系统中指定host为‘0.0.0.0’时，只能通过localhost或ip地址访问webpack服务。
     */
    host: '127.0.0.1',
    // host: '0.0.0.0',
    //指定端口号
    port: 9101,
    //设置代理
    proxy: {
      //对以'/weather_mini'开头的请求进行代理,注意必须以/开头
      '/weather_mini': {
        target: publicParam.host, //需要代理的地址
        secure: true, //允许https请求
        changeOrigin: true //允许跨域
      }
    }
  };
  //对模块的源代码进行转换。注意：webpack自身只理解JavaScript。
  let module = {
    //解析规则
    rules: [
      {
        test: /\.jsx?$/, //需要解析的文件类型
        include: path('src'), //需要解析的文件目录
        loader: 'babel-loader' //解析器
      },
      {
        test: /\.(css|less)$/, //加载less文件：用于antd主题定制
        include: /node_modules/,
        use: [
          'style-loader', //处理css文件：将css添加到html的style标签中
          '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: [
          'style-loader', //处理css文件：将css添加到html的style标签中
          'css-loader', //处理css文件：解释并引用css中的@import和url()
          'postcss-loader', //处理css文件：自动补全webkit前缀等
          'sass-loader' //将scss文件转为css文件
        ]
      }
    ]
  };
  let plugins = [
    //热替换插件
    new webpack.HotModuleReplacementPlugin(),
    //html加载插件
    new HtmlWebpackPlugin({
      title: publicParam.title, //项目名称
      template: './public/index.html', //Html模板
      inject: true //注入打包后生成的文件
    })
  ];

  //开发环境配置参数
  let config = {mode, module, devtool, devServer, plugins};
  return merge(configWebpack(env), config);
};