/**

 * webpack 基础配置

 */

const webpack = require('webpack')

const path = require('path')

const fs = require('fs')

const Entries = {} // 保存文件入口

const pages = []// 存放html-webpack-plugin实例

const env = process.env.NODE_ENV !== 'prod' // 判断运行环境

const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入mini-css-extract-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

//  获取html-webpack-plugin实例集合

(function () {

  let pagePath = path.join(__dirname, '../src/page')// 定义存放html页面的文件夹路径

  let paths = fs.readdirSync(pagePath) // 获取pagePath路径下的所有文件

  paths.forEach(page => {

    page = page.split('.')[0]// 获取文件名（不带后缀）

    pages.push(new HtmlWebpackPlugin({

      filename: `views/${page}.html`, // 生成的html文件的路径（基于出口配置里的path）

      template: path.resolve(__dirname, `../src/page/${page}.html`), // 参考的html模板文件

      chunks: [page, '[name]', 'commons', 'vendors', 'manifest'], // 配置生成的html引入的公共代码块 引入顺序从右至左

      favicon: path.resolve(__dirname, '../src/img/favicon.ico'), // 配置每个html页面的favicon

      minify: {// 配置生成的html文件的压缩配置

        collapseWhitespace: true,

        collapseInlineTagWhitespace: true,

        conservativeCollapse: true,

        minifyCSS: true,

        minifyJS: true,

        removeComments: true,

        trimCustomFragments: true

      }

    }))

    Entries[page] = path.resolve(__dirname, `../src/js/${page}.js`)// 入口js文件

  })

})()

module.exports = {

  // 配置入口文件

  entry: Entries,

  // 启用 sourceMap

  devtool: 'cheap-module-source-map',

  // mode为none表示这是默认配置

  mode: 'none',

  // 配置文件出口

  output: {

    // 将打包好的js输出到public（静态资源目录）下的js文件夹中

    filename: 'public/js/[name].bundle.[hash].js',

    path: path.resolve(__dirname, '../dist'), // 输出目录，所有文件的输出路径都基于此路径之上(需要绝对路径)

    publicPath: '../'

  },

  // 省略文件后缀

  resolve: {

    extensions: ['.js'] // 配置过后，书写该类文件路径的时候可以省略文件后缀

  },

  // loader

  module: {

    rules: [

      // 使用expose处理JQuery（JQ使用npm安装）配置了这一条后就不要使用external（主要用于cdn引入）

      {

        test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery

        loader: 'expose-loader?$!expose-loader?jQuery' // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`

      },

      // 处理html中的图片，考虑到node使用模板的情况所以不能使用html-loader

      {

        test: /\.html$/,

        use: [{

          loader: 'html-withimg-loader' // 处理img标签中的图片

        }]

      },

      // 处理样式表

      {

        test: /\.(sa|sc|c)ss$/,

        use: [

          env ? 'style-loader' : MiniCssExtractPlugin.loader,

          'css-loader',

          'postcss-loader',

          'sass-loader'

        ]

      },

      {

        test: /\.(less)$/,

        use: [

          env ? 'style-loader' : MiniCssExtractPlugin.loader,

          'css-loader',

          'postcss-loader',

          'less-loader'

        ]

      },

      // 使用babel处理js文件

      {

        test: /\.m?js$/,

        exclude: /(node_modules|bower_components)/,

        use: 'babel-loader'

      },

      // 处理图片

      {

        test: /\.(png|jpg|gif|svg)$/,

        use: [{

          loader: 'url-loader',

          options: {

            limit: 10000, // 设置图像大小超过多少转存为单独图片

            name: 'public/img/[name].[hash].[ext]' // 转存的图片目录

          }

        }]

      },

      // 处理字体

      {

        test: /\.(woff|woff2|eot|ttf|otf)$/,

        use: ['url-loader']

      }

    ]

  },

  // 配置插件

  plugins: [

    // 分离tml-webpack-plugin实例数组、引入jq

    ...pages, new webpack.ProvidePlugin({

      $: 'jquery',

      jQuery: 'jquery',

      'window.$': 'jquery',

      'window.jQuery': 'jquery'

    })

  ],

  // 配置webpack执行相关

  performance: {

    maxEntrypointSize: 1000000, // 最大入口文件大小1M

    maxAssetSize: 1000000 // 最大资源文件大小1M

  }

}

/**

 * 生产环境配置

 */

const webpackBase = require('./webpack.config.base') // 引入基础配置

const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin') //  提取css

const webpackMerge = require('webpack-merge') // 引入 webpack-merge 插件

const CleanWebpackPlugin = require('clean-webpack-plugin') // 清理dist文件夹

// 合并配置文件

module.exports = webpackMerge(webpackBase, {

  plugins: [

    new MiniCssExtractPlugin({// 提取出的Css的相关配置

      filename: 'public/css/[name].[hash].css' // 文件存放路径

    }),

    new CleanWebpackPlugin(['dist'], {// 自动清理 dist 文件夹

      root: path.resolve(__dirname, '../'), // 根目录

      verbose: true, // 开启在控制台输出信息

      dry: false // 启用删除文件

    })

  ],

  optimization: {

    minimize: true,

    splitChunks: {// 配置提取公共代码

      chunks: 'all',

      minSize: 30000, // 配置提取块的最小大小（即不同页面之间公用代码的大小）

      minChunks: 3, // 最小共享块数，即公共代码最少的重复次数一般设为3

      automaticNameDelimiter: '.', // 生成的名称指定要使用的分隔符

      cacheGroups: {// 设置缓存组

        vendors: {

          name: 'vendors',

          test (module) {

            let path = module.resource

            return /[\\/]node_modules[\\/]/.test(path) || /[\\/]lib[\\/]/.test(path)

          },

          priority: 30

        },

        commons: {

          name: 'commons',

          test: /\.js$/,

          enforce: true,

          priority: 20

        }

      }

    },

    runtimeChunk: {

      name: 'manifest' // 打包运行文件

    }

  }

})