const path = require("path");
const { isProd } = require("./util");

const { VueLoaderPlugin } = require("vue-loader");
var ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin')
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");

const commonCssLoader = [
  isProd?{
    // https://github.com/vuejs/vue-router/issues/2380
    loader: ExtractCssChunksPlugin.loader,
    options: {
      hot: !isProd,
      reloadAll: !isProd
    },
  }:'vue-style-loader',
  // 'vue-style-loader',
  {
    loader: 'css-loader',
    options: {  }
  },
]

const allConfig = {
  output: {
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/dist/",
    filename: "[name].[chunkhash].js",
  },
  resolve: {
    alias: {
      public: path.resolve(__dirname, "../public"),
      "@": path.resolve(__dirname, "../src"),
    },
  },
  devtool: isProd ? false : "cheap-module-source-map",//"#cheap-module-source-map",
  module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          compilerOptions: {
            preserveWhitespace: false,
          },
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "[name].[ext]?[hash]",
        },
      },
      {
        test: /\.css?$/,
        use: [...commonCssLoader],
      },
      {
        test: /\.less?$/,
        use: [...commonCssLoader,"less-loader"],
      },
      {
        test: /\.scss?$/,
        use: [
          ...commonCssLoader,
          {
            loader: "sass-loader",
            options: {
              // 你也可以从一个文件读取，例如 `variables.scss`
              // 如果 sass-loader 版本 = 8，这里使用 `prependData` 字段
              // 如果 sass-loader 版本 < 8，这里使用 `data` 字段
              additionalData: `$color: red;`,
            },
          },
        ],
      },
    ],
  },
  plugins: [new VueLoaderPlugin(), new FriendlyErrorsPlugin()],
  performance: {
    hints: false,
  },
};
if(isProd){
  allConfig.plugins.push(
    new ExtractCssChunksPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[contenthash].chunk.css'
    })
  );
}
module.exports = allConfig;