const path = require('path')
// 1. 导入 在内存中生成页面的webpack插件
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const webpack  = require('webpack')

// 导入抽取CSS样式文件的插件
const extractTextPlugin = require('extract-text-webpack-plugin')
// 导入优化压缩CSS样式表的插件
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 使用Node语法，向外暴露配置对象，从而，让webpack运行的时候，加载指定的配置
// 为什么可以使用Node语法？因为 webpack 这个工具，就是基于node构建的；
module.exports = {
  entry: {app:path.join(__dirname, './src/main.js'),
  vendors: ['vue', 'vuex', 'vue-router', 'axios', 'mint-ui', 'vue2-preview'] // 这是第三方包的名称
 }, // 项目的入口文件
  output: {
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'js/index.js' // 输出文件名
  }, // 打包好的文件的数据配置
  plugins: [ // 插件配置节点
    new htmlWebpackPlugin({ // 创建一个 htmlWebpackPlugin 的实例对象
      template: path.join(__dirname, './src/index.html'), // 指定模板页面路径
      filename: 'index.html', // 指定内存中生成的HTMl文件名称
      minify: { // 表示提供压缩选项
        removeComments: true, // 移除页面中的注释
        collapseWhitespace: true, // 合并空白字符
        removeAttributeQuotes: true // 移除属性节点上的引号
      }
    }),
    new cleanWebpackPlugin(['dist']),
    new webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'js/vendors.js'}),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false // 压缩完毕的代码中，移除警告信息
      }
    }),
    new webpack.DefinePlugin({ // 此插件的作用，相当于在项目的全局，配置了一些全局可用的变量；将来，我们引用的第三方包中，比如Vue，会检查webpack中有没有提供 process.env.NODE_ENV 字段，如果有，并且字段的名字为 "production"， 就表示是生产发布环境，那么会移除不必要的Vue警告功能；并做其它优化！
      'process.env.NODE_ENV': '"production"',
      'myVar': '"1234"'
    }),
    new extractTextPlugin('css/styles.css'), // 抽取CSS文件到单独的目录中
   // new optimizeCSSAssetsPlugin() // 自动压缩CSS
  ],
  module: { //配置非js对应的loader
    rules: [ //这些非js和loader的对应关系
      {
        test: /\.css$/, use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
          publicPath: '../' // 表示，如果将来生成的样式中，包含 路径，那么，需要自动在路径前面加上 ../ 前缀
        })
      }, // 创建处理 css 文件的 loader 匹配规则
      {
        test: /\.less$/, use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader'],
          publicPath: '../'
        })
       }, // 配置处理less文件的规则
      // {
      //   test: /\.scss$/, use: extractTextPlugin.extract({
      //     fallback: 'style-loader',
      //     use: ['css-loader', 'sass-loader'],
      //     publicPath: '../'
      //   })
      // }, // 配置 处理 scss 文件的规则
      {
        test: /\.jpg|png|gif|bmp$/,
        use: 'url-loader?limit=7631&name=images/[hash:8]_[name].[ext]'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      { test: /\.vue$/, use: 'vue-loader' }, // 解析Vue组件的第三方loader
      { test: /\.ttf|woff|woff2|eot$/, use: 'url-loader' }, // 处理 样式中字体文件路径的

    ]

  }
}