// 引入 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const isDev = process.env.NODE_ENV === 'development';
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const config = require('./public/config')[isDev ? 'dev' : 'build'];
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')
const Happypack = require('happypack');
// const HardSourcedWebpackPlugin = require('hard-sourced-webpack-plugin');

if(module && module.hot) {
  module.hot.accept()
}

/**
 * 开启 JS 多进程压缩
 * 当前 Webpack 默认使用的是 TerserWebpackPlugin，默认就开启了多进程和缓存，构建时，
 * 你的项目中可以看到 terser 的缓存文件 node_modules/.cache/terser-webpack-plugin。
 * 不管是 webpack-parallel-uglify-plugin 或者是 uglifyjs-webpack-plugin 配置 parallel
 * 没必要单独安装这些插件，它们并不会让你的 Webpack 构建速度提升。
 */

//webpack.config.js
module.exports = {
  /**
   * 我们可以将一些JS文件存储在 CDN 上(减少 Webpack打包出来的 js 体积)，在 index.html 中通过 <script> 标签引入
   * 我们希望在使用时，仍然可以通过 import 的方式去引用(如 import $ from 'jquery')，并且希望 webpack 不会对其进行打包，此时就可以配置 externals。
   */
  externals: {
    'jquery': 'jQuery'
  },
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //必须是绝对路径
    filename: 'bundle.[hash].js',
    publicPath: '/' //通常是CDN地址
  },
  /**
     * mode 配置项，支持以下两个配置:
        development：将 process.env.NODE_ENV 的值设置为 development，
                     启用 NamedChunksPlugin 和 NamedModulesPlugin
        production：将 process.env.NODE_ENV 的值设置为 production，
                    启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, 
                    NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin
     * 
     *  */
  // mode: isDev ? 'development' : 'production',
  module: {
    rules: [
      // 将JS转义低版本
      {
        test: /\.jsx?$/,
        // use: ['babel-loader'],
        // 把 thread-loader 放置在其它 loader 之前，那么放置在这个 loader 之后的 loader 就会在一个单独的 worker 池中运行。
        // 在 worker 池(worker pool)中运行的 loader 是受到限制的。例如：
        // 这些 loader 不能产生新的文件。
        // 这些 loader 不能使用定制的 loader API（也就是说，通过插件）。
        // 这些 loader 无法获取 webpack 的选项设置。
        use: [ 'thread-loader', 'cache-loader',{
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  "corejs": 3
                }
              ]
            ],
          }
        }],
        // exclude 的优先级高于 include，在 include 和 exclude 中使用绝对路径数组，尽量避免 exclude，更倾向于使用 include。
        include: [path.resolve(__dirname, 'src')]
        // exclude: /node_modules/ //排除 node_modules 目录
      },
      // 处理样式文件
      {
        test: /\.(le|c)ss$/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            hmr: isDev,
            reloadAll: true,
          }
        }, 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: function () {
                return [
                  require('autoprefixer')()
                ]
              }
            }
          }
        },
          'less-loader'
        ],
        exclude: /node_modules/
      },
      // {
      //   test: /\.js[x]?$/,
      //   use: 'Happypack/loader?id=js',
      //   include: [path.resolve(__dirname, 'src')]
      // },
      // {
      //   test: /\.css$/,
      //   use: 'Happypack/loader?id=css',
      //   include: [path.resolve(__dirname, 'src')]
      // },
      // 图片/字体文件处理 处理本地的资源文件
      {
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240, //10K 资源大小小于 10K 时，将资源转换为 base64
              esModule: false,
              name: '[name]_[hash:6].[ext]',
              outputPath: 'assets'
            }
          }
        ],
        exclude: /node_modules/
      },
      // 处理 html 中的本地图片
      {
        test: /.html$/,
        use: 'html-withimg-loader'
      }
    ],
    // 如果一些第三方模块没有AMD/CommonJS规范版本，
    // 可以使用 noParse 来标识这个模块，这样 Webpack 会引入这些模块，
    //但是不进行转化和解析，从而提升 Webpack 的构建性能 ，例如：jquery 、lodash
    noParse: /jquery|lodash/
  },

  plugins: [
    // html-webpack-plugin 处理HTML里面的 JS hash问题
    //数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', //打包后的文件名
      config: config.template,
      minify: {
        removeAttributeQuotes: false, //是否删除属性的双引号
        collapseWhitespace: false, //是否折叠空白
      },
      // hash: true //是否加上hash，默认是 false
    }),
    new CleanWebpackPlugin(),
    // 静态资源拷贝插件
    new CopyWebpackPlugin([
      {
        from: 'public/js/*.js',
        to: path.resolve(__dirname, 'dist', 'js'),
        flatten: true,
      },
      //还可以继续配置其它要拷贝的文件
    ]),
    // 分离css
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    // 压缩CSS/JS
    new OptimizeCssPlugin(),
    // 热更新插件
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html' //打包后的文件名
    }),
    new HtmlWebpackPlugin({
      template: './public/login.html',
      filename: 'login.html' //打包后的文件名
    }),
    /**
     * 由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。
     * 文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？
       HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
       当你的项目不是很复杂时，不需要配置 happypack，因为进程的分配和管理也需要时间，并不能有效提升构建速度，甚至会变慢
     */
    // new Happypack({
    //   id: 'js',  //和rule中的id=js对应
    //   // 将之前rule中的loader在此配置
    //   use: ['babel-loader'] //必须是数组
    // }),
    // new Happypack({
    //   id: 'css',
    //   use: ['style-loader', 'css-loader', 'postcss-loader','less-loader']
    // })
    // HardSourceWebpackPlugin 为模块提供中间缓存，缓存默认的存放路径是: node_modules/.cache/hard-source
    // 配置 hard-source-webpack-plugin，首次构建时间没有太大变化，但是第二次开始，构建时间大约可以节约 80%。
    // new HardSourcedWebpackPlugin(),
    // DllPlugin 和 DLLReferencePlugin 可以实现拆分 bundles(避免JS文件过大)，并且可以大大提升构建速度
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'dll', 'mainfest.json')
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!dll', '!dll/**'] //不删除dll目录
    })
  ],
  // webpack-dev-server 在浏览器展示Html
  devServer: {
    port: '3000', //默认是8080
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: false, //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true, //是否启用 gzip 压缩
    hot: true //热更新
    // devServer: {
    //   // 设置代理
    //   // proxy: {
    //   //   '/api': {
    //   //     target: 'http://localhost:4000',
    //   //     pathRewrite: {
    //   //       '/api': ''
    //   //     }
    //   //   }
    //   // }
    // }
  },
  //devtool 中的一些设置，可以帮助我们将编译后的代码映射回原始源代码。不同的值会明显影响到构建和重新构建的速度。
  devtool: 'cheap-module-eval-source-map', //开发环境下使用

}