fj-dc-ui/webpack.config.js

var path = require("path");
var webpack = require("webpack");
var HtmlwebpackPlugin = require("html-webpack-plugin");

// 引入happypack 实现多线程打包
var HappyPack = require("happypack");
var os = require("os");
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

let BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

function date() {
  let nowDate = new Date();
  let year = nowDate.getFullYear();
  let month =
    nowDate.getMonth() + 1 < 10
      ? "0" + (nowDate.getMonth() + 1)
      : nowDate.getMonth() + 1;
  let day =
    nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
  let hours =
    nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();

  let dateStr = year + "_" + month + day + "_" + hours;
  return dateStr;
}

// 基础配置
const config = {
  mode: process.env.NODE_ENV === "production" ? "production" : "development",

  entry: {
    // 注意：这里需要修改，应该只有一个 polyfill，并且作为第一个入口
    // 或者使用 babel-polyfill 在入口文件中引入
    gwDdIndex: ["babel-polyfill", "./src/pages/gwDdIndex.js"],
    jobAccount: ["babel-polyfill", "./src/pages/jobAccount.js"],
    problemSeeXsk: ["babel-polyfill", "./src/pages/problemSeeXsk.js"],
    problemSeeRy: ["babel-polyfill", "./src/pages/problemSeeRy.js"],
    problemSeeSh: ["babel-polyfill", "./src/pages/problemSeeSh.js"],
    problemSeeDxs: ["babel-polyfill", "./src/pages/problemSeeDxs.js"],
    problemSeeSz: ["babel-polyfill", "./src/pages/problemSeeSz.js"],
    home: ["babel-polyfill", "./src/pages/home.js"],
    map3D: ["babel-polyfill", "./src/pages/map3D.js"],
    inspectionPlanQuery: [
      "babel-polyfill",
      "./src/pages/inspectionPlanQuery.js",
    ],
  },

  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "./", // 关键：使用相对路径
    filename: "[name]_build.js",
    chunkFilename: "chunk_[name].[chunkhash].js",
  },

  optimization: {
    minimize: false,
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2,
        },
      },
    },
  },

  plugins: [],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
      },
      {
        test: /\.(woff|svg|eot|ttf)\??.*$/,
        loader: "url-loader",
      },
      {
        test: /\.vue$/,
        use: "happypack/loader?id=happyvue",
      },
      {
        test: /\.js$/,
        use: "happypack/loader?id=happybabel",
        exclude: /(node_modules|dist|static)/,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
        },
      },
    ],
  },

  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@api": path.resolve("src/api"),
      "@widget": path.resolve("src/widgets"),
      "@util": path.resolve("src/utils"),
      "@baseWidget": path.resolve("src/widgets/baseWidget"),
      "@scss": path.resolve("src/assets/sass"),
    },
    extensions: [".html", ".js", ".vue", ".json", ".scss"],
    modules: [path.resolve("src"), path.resolve("node_modules")],
  },

  performance: {
    hints: false,
  },
};

// 开发环境配置
if (process.env.NODE_ENV !== "production") {
  config.devtool = "cheap-module-eval-source-map";

  config.plugins = [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
    }),
    new HappyPack({
      id: "happybabel",
      loaders: [
        {
          loader: "babel-loader",
          options: {
            presets: ["es2015"],
            plugins: ["syntax-dynamic-import"],
            cacheDirectory: true,
          },
        },
      ],
      threadPool: happyThreadPool,
      verbose: true,
    }),
    new HappyPack({
      id: "happyvue",
      loaders: ["vue-loader"],
      threadPool: happyThreadPool,
      verbose: true,
    }),

    // HTML 插件
    new HtmlwebpackPlugin({
      filename: "index.html",
      template: "./src/pages/gwDdIndex.html",
      chunks: ["gwDdIndex"],
      inject: "body", // 确保脚本注入到 body 末尾
      hash: true, // 添加 hash 防止缓存
    }),
    new HtmlwebpackPlugin({
      filename: "jobAccount.html",
      template: "./src/pages/jobAccount.html",
      chunks: ["jobAccount"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeXsk.html",
      template: "./src/pages/problemSeeXsk.html",
      chunks: ["problemSeeXsk"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeRy.html",
      template: "./src/pages/problemSeeRy.html",
      chunks: ["problemSeeRy"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeSh.html",
      template: "./src/pages/problemSeeSh.html",
      chunks: ["problemSeeSh"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeDxs.html",
      template: "./src/pages/problemSeeDxs.html",
      chunks: ["problemSeeDxs"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeSz.html",
      template: "./src/pages/problemSeeSz.html",
      chunks: ["problemSeeSz"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "home.html",
      template: "./src/pages/home.html",
      chunks: ["home"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "map3D.html",
      template: "./src/pages/map3D.html",
      chunks: ["map3D"],
      inject: "body",
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "inspectionPlanQuery.html",
      template: "./src/pages/inspectionPlanQuery.html",
      chunks: ["inspectionPlanQuery"],
      inject: "body",
      hash: true,
    }),
  ];

  // 开发服务器配置
  config.devServer = {
    proxy: {
      "/pdcApi": {
        // target: "http://39.98.38.2:18089/dc-api/",
        target: "http://127.0.0.1:8500",
        changeOrigin: true,
        pathRewrite: {
          "^/pdcApi": "",
        },
      },
      "/trs": {
        target: "http://10.1.194.19:8080",
        changeOrigin: true,
        pathRewrite: {
          "^/trs": "",
        },
      },
      "/arcgisApi/": {
        target: "http://hzz-pad.goldenwater.com.cn/arcgisApi/",
        changeOrigin: true,
        pathRewrite: {
          "^/arcgisApi/": "",
        },
      },
      "/JsReport/": {
        target: "http://pdc.goldenwater.com.cn/JsReport/",
        changeOrigin: true,
        pathRewrite: {
          "^/JsReport": "",
        },
      },
      "/demo/": {
        target: "http://10.1.102.136:8888/demo/",
        changeOrigin: true,
        pathRewrite: {
          "^/demo": "",
        },
      },
      "/pageofficePath/": {
        // target: "http://pdc.goldenwater.com.cn/pageofficePath/",
        target: "http://127.0.0.1:9002/",
        changeOrigin: true,
        pathRewrite: {
          "^/pageofficePath": "",
        },
      },
      "/pageoffice/": {
        target: "http://127.0.0.1:9002",
        changeOrigin: true,
        pathRewrite: {
          "^/pageoffice": "",
        },
      },
    },
    host: "localhost",
    port: 8082,
    open: true,
    hot: true,
    inline: true,
    compress: true,
    contentBase: path.join(__dirname, "dist"),
    publicPath: "/",
    watchContentBase: true,

    // 关键：简化 historyApiFallback
    historyApiFallback: {
      rewrites: [
        { from: /./, to: "/index.html" }, // 所有路径都重定向到 index.html
      ],
    },

    overlay: {
      errors: true,
      warnings: false,
    },
    stats: "minimal",
    noInfo: true,
  };
}

// 生产环境配置
if (process.env.NODE_ENV === "production") {
  config.devtool = false;
  config.optimization.minimize = true;

  config.output = {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "./", // 生产环境也用相对路径
    filename: "[name]_build_v" + date() + ".js",
    chunkFilename: "chunk_[name]_v" + date() + ".[chunkhash].js",
  };

  config.plugins = [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
    }),
    new HappyPack({
      id: "happybabel",
      loaders: [
        {
          loader: "babel-loader",
          options: {
            presets: ["es2015"],
            plugins: ["syntax-dynamic-import"],
            cacheDirectory: true,
          },
        },
      ],
      threadPool: happyThreadPool,
      verbose: true,
    }),
    new HappyPack({
      id: "happyvue",
      loaders: ["vue-loader"],
      threadPool: happyThreadPool,
      verbose: true,
    }),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"',
      },
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),

    // HTML 插件
    new HtmlwebpackPlugin({
      filename: "index.html",
      template: "./src/pages/gwDdIndex.html",
      chunks: ["gwDdIndex"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "jobAccount.html",
      template: "./src/pages/jobAccount.html",
      chunks: ["jobAccount"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeXsk.html",
      template: "./src/pages/problemSeeXsk.html",
      chunks: ["problemSeeXsk"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeRy.html",
      template: "./src/pages/problemSeeRy.html",
      chunks: ["problemSeeRy"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeSh.html",
      template: "./src/pages/problemSeeSh.html",
      chunks: ["problemSeeSh"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeDxs.html",
      template: "./src/pages/problemSeeDxs.html",
      chunks: ["problemSeeDxs"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "problemSeeSz.html",
      template: "./src/pages/problemSeeSz.html",
      chunks: ["problemSeeSz"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "home.html",
      template: "./src/pages/home.html",
      chunks: ["home"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "map3D.html",
      template: "./src/pages/map3D.html",
      chunks: ["map3D"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),
    new HtmlwebpackPlugin({
      filename: "inspectionPlanQuery.html",
      template: "./src/pages/inspectionPlanQuery.html",
      chunks: ["inspectionPlanQuery"],
      inject: "body",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      hash: true,
    }),

    // 可选：分析插件
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
    }),
  ];
}

module.exports = config;