import { smart } from 'webpack-merge'

import merge from 'webpack-merge'

export default '/absolute/path'

export default 'data:imgae/jpeg:base64....'

output: {
  filename: 'bundle.[currentHash:8].js'
}

rules: [
  {
    test: '/\.less$/',
    loader: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'less-loader',
      'postcss-loader'
    ]
  }
],
plugin: [
  // 抽离 css 文件
  new MiniCssExtractPlugin: {
      filename: 'css/main.[contenthash:8].css'
  }
],
optimization: {
  minimizer: [new TerserJsPlugin({}), new OptimizeCssAssetPlugin()]
}

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'index.html'),
    filename: 'index.html',
    chunks: ['index', 'vender', 'common']
  }),
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'other.html'),
    filename: 'other.html',
    chunks: ['other', 'common']
  })
],
optimization: {
  splitChunks: {
    /** initial 入口 chunk，对于异步导入的 chunk 不处理
      * async 异步 chunk，只对异步导入的文件处理
      * all 全部 chunk
      */
    chunks: 'all',
    // 缓存分组
    cacheGroups: {
      vendor: {
        // 第三方模块
        vendor: {
          name: 'vender', // chunk 名称
          priotrity: 1, // 权限更高，优先抽离，重要！！！
          test: /node_modules/, // 
          minSize: 10 * 1024, // 模块的大小限制
          minChunks: 1 // 最少复用过多少次
        },
        // 公用模块
        common: {
          name: 'common', // chunk 名称
          priotrity: 0, // 优先级
          test: /node_modules/, // 
          minSize: 10 * 1024, // 模块的大小限制
          minChunks: 2 // 公共模块最少复用过多少次
        }
      }
    }
  }
}

setTimeout(() => {
  // vue react 异步组件也是通过这种方式
  // 使用 webpackChunkName 指定 chunk name
  import(/* webpackChunkName: "dynamic" */ './dynamic-data.js').then(res => {
    console.log(res.default.message)
  })
}, 5000)

{
  test: /\.js$/,
  loader: ['babel-loader?cacheDirectory'], // 开启缓存
  include: srcPath, // 明确范围
  // 或者
  exclude: /node_module/
}

// webpack.prod.js
plugins: [
  // 忽略 moment 的 locale 目录
  new webpack.IgnorePlugin(/\.\/local/, /moment/)
]

import moment from 'moment' // 235.4K (gzipped: 66.3K)
import 'moment/locale/zh-cn'
moment.locale('zh-cn') // 设置语言为中文

module: {
  // 对于 react.min.js 不打包
  noParse: [/react\.min\.js$/]
}

// webpack.prod.js
const HappyPack = require('happypack')

// webpack.prod.js
module: {
  rules: [
    {
      test: /\.js$/,
      use: ['happypack/loader?id=babel'],
      include: srcPath,
    }
  ]
},
plugins: [
  new HappyPack({
    // 用唯一的标标识符 id 来代表当前的 HappyPack 是用来处理哪一类特定的文件
    id: 'babel',
    // 如何处理 .js 文件，用法核 loader 配置一样
    loaders: ['babel-loader?cacheDirectory']
  })
]

// webpack.prod.js
const ParallelUglifyPlugin = require('ParallelUglifyPlugin')

// webpack.prod.js
plugins: [
  new ParallelUglifyPlugin({
    // 本质上还是用了 UglifyJS，以下是传给 UglifyJS 的参数，优化的点在于开启了多进程
    uglifyJS: {
      output: {
        beautify: false, // 紧凑的输出
        comments: false, // 删除所有的注释
      },
      compress: {
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次，但是没有定义成变量去引用的静态值
        reduce_vars: true,
      }
    }
  })
]

module.exports = {
  entry: {
    // index: path.join(srcPath, 'index.js'),
    index: [
      'webpack-dev-server/client?http://localhost:8080/',
      'webpack/hot/dev-server',
      path.join(srcPath, 'index.js'),
    ],
    other: path.join(srcPath, 'other.js'),
  },
  devServer: {
    port: 8080,
    progress: true, // 显示打包的进度条
    contentBase: distPath, // 根目录
    open: true, // 自动打开浏览器
    compress: true, // 启动 gzip 压缩

    hot: true,

    // 设置代理
    proxy: {
      // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
      '/api': 'http://localhost:3000',

      // 将本地 /api2/xxx 代理到 localhost:3000/xxx
      '/api2': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '/api2': '',
        },
      },
    },
  },
};

import { sum } from './math'

const sumRes = sum(10, 20)
console.log('sumRes', sumRes)

// 增加开启热更新之后的代码逻辑
if (module.hot) {
  module.hot.accept(['./math'], () => {
    const sumRes = sum(10, 30);
    console.log('sumRes in hot', sumRes);
  });
}

import('./dynamic-data.js').then()

output: {
  filename: '[name].[contentHash:8].js',
  path: distPath,
  publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
},

// math.js
export const add = (a, b) => a + b;

export const multi = (a, b) => a * b

const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin')

module。exports = {
  resolve: {
    // 针对 npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
    mainFields: ['jsnext:main', 'browser', 'main']
  },
  plugins: [
    // 开启 scope hoisting
    new ModuleConcatenationPlugin()
  ]
}

// 定义三种状态
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

function MyPromise(fn) {
  this.state = PENDING;
  this.resolveCallback = [];
  this.rejectCallback = [];
  // fulfilled 或者 rejected 之后需要把结果报错在对象中
  this.value = null;

  // 使用箭头函数，保证函数体内的 this 指向生成的 promise 对象
  const resolve = (value) => {
    if (this.state === PENDING) {
      this.resolveCallback.map((each) => each(value));
      this.value = value;
      this.state = FULFILLED;
    }
  };

  const reject = (value) => {
    if (this.state === PENDING) {
      this.rejectCallback.map((each) => each(value));
      this.value = value;
      this.state = REJECTED;
    }
  };

  try {
    fn(resolve, reject);
  } catch (e) {
    reject(e);
  }
}

MyPromise.prototype.then = function (onFulfilled, onRejected) {
  const onFulfilledCallback =
    typeof onFulfilled === 'function' ? onFulfilled : (x) => x;
  const onRejectedCallback =
    typeof onRejected === 'function'
      ? onRejected
      : (r) => {
          throw r;
        };

  // 注册回调函数
  if (this.state === PENDING) {
    this.resolveCallback.push(onFulfilledCallback);
    this.rejectCallback.push(onRejectedCallback);
  }

  // 如果 promise 对象的当前状态已经 fulfilled，则直接执行 then 中的方法
  if (this.state === FULFILLED) {
    onFulfilled(this.value);
  }

  if (this.state === REJECTED) {
    onRejected(this.value);
  }

  return this;
};

// 测试用例
const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('hello');
  }, 1000);
})
  .then('world')
  .then(console.log);

setTimeout(() => {
  p1.then(console.log);
}, 2000);

// 1s 后输出 hello 
// 再过 1s 输出 hello

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    reject('error');
  }, 1000);
}).then(null, (error) => {
  console.log(`error: `, error);
});

// 1s 后输出 error: error

Promise.myAll = function (promises) {
  let count = 0;
  return new Promise((resolve, reject) => {
    let result = new Array(promises.length);
    for (let i = 0; i < promises.length; i += 1) {
      const promise = promises[i];
      if (promise instanceof Promise) {
        promise
          .then((res) => {
            result[i] = res;
            count += 1;
            if (count === promises.length) {
              resolve(result);
            }
          })
          .catch((err) => {
            reject(err);
          });
      } else {
        result[i] = promise;
        count += 1;
        if (count === promises.length) {
          resolve(result);
        }
      }
    }
  });
};

const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('hello');
  }, 1000);
});

const p2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('world');
  }, 500);
});

const p3 = 999;

const p4 = Promise.reject('this is an error');

Promise.myAll([p1, p2, p3]).then((res) => {
  console.log(`res: `, res);
});
// res: [ 'hello', 'world', 999 ]

Promise.myAll([p1, p2, p3, p4])
  .then((res) => {
    console.log(`res: `, res);
  })
  .catch((error) => {
    console.log(`error: `, error);
  })
 
// error: this is an error