/*
 * @Author: 小明丶
 * @Date: 2019-08-19 15:23:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-16 10:55:31
 * @Description:
 */
//  webpack通用配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const vuxLoader = require("vux-loader");
let env = process.env.NODE_ENV;
//打包地址
let srcUrl = "/sib_wx_scores/";
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: env ? "/sib_wx_scores/" : "/", //根据线上项目路径更改 /projectpath
  },
  /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
   * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
   */
  externals: {
    vue: "Vue",
    axios: "axios",
    vuex: "Vuex",
    router: "VueRouter",
  },
  resolve: {
    extensions: [".vue", ".js", ".less"],
    alias: {
      //别名配置
      "@": path.resolve(__dirname, "src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(svg|ttf|eot|woff)\??.*$/,
        loader: "url-loader?limit=10000",
      },
      {
        test: /\.css$/,
        use: [env ? MiniCssExtractPlugin.loader : "vue-style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: [
          env ? MiniCssExtractPlugin.loader : "vue-style-loader",
          "css-loader",
          "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
          "less-loader",
          // 全局注入less变量，在所有vue组件中可使用
          // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
          {
            loader: "style-resources-loader",
            options: {
              patterns: [path.resolve(__dirname, "src/style/mixins.less")],
            },
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)/, //处理图片
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 100000,
              outputPath: "img/",
              // publicPath: `${srcUrl}img`
              publicPath: `/img`,
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            // @vue/babel-preset-jsx  vue jsx语法支持
            presets: ["@babel/preset-env", "@vue/babel-preset-jsx"],
            plugins: ["dynamic-import-webpack"], //import 函数支持，需要安装
            // plugins: ["@babel/plugin-transform-runtime"]
          },
        },
      },
    ],
  },
  plugins: [
    // 静态目录
    new CopyPlugin([
      {
        from: path.resolve(__dirname, "static"),
        to: "static",
      },
    ]),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html", //以这个文件作为模板
      filename: "index.html", //打包后的文件名
      title: "Vue_webpack",
      hash: true,
      minify: {
        removeComments: true, //移除注释
        collapseWhitespace: true,
        removeEmptyAttributes: true, //移除空属性
        removeAttributeQuotes: true, //移除属性html标签属性的引号 ""
      },
    }),
  ],
};

// module.exports = vuxLoader.merge(webpackConfig, {
//     plugins: [{
//         name: 'vux-ui'
//     }]
//     }
// );