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

module.exports = {
  devtool: 'source-map',  // 指定source-map，解决打包之后调试找不到具体代码位置
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件（“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录））
  output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename: "index.js"//打包后输出文件的文件名
  },
  devServer: {
    contentBase: "./app",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true, //会为入口页面添加“热加载”功能，实时刷新
    port: 3000,  // 监听的端口
    hot: true // Hot Module Reloading，即尝试重新加载组件改变的部分（而不是重新加载整个页面）
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,   // 匹配loaders所处理文件的拓展名的正则表达式
        use: {
          loader: "babel-loader",
          // options: {   // 转移到.babelrc文件中，单独配置
          //   presets: [
          //       "env",  // 解析Es6
          //       "react" // 解析JSX
          //   ]
          // }
        },
        exclude: /node_modules/    // 屏蔽不需要处理的文件（文件夹）
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"  // 将所有的计算后的样式加入页面中，和css-loader组合在一起使你能够把样式表嵌入webpack打包后的JS文件中
          }, {
            loader: "css-loader",  // 使你能够使用类似@import 和 url(...)的方法实现 require()的功能
            options: {
              modules: true, // 指定启用css modules
              sourceMap: true,
              localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
            }
          },{
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              config: {
                path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.html"    //new 一个这个插件的实例，并传入相关的参数
    }),
    new webpack.HotModuleReplacementPlugin()   //热加载插件
  ],
}