zhongze-front/config/webpack.dev.js

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HappyPack = require("happypack");
const os = require("os");
const happyThreadPool = HappyPack.ThreadPool({
  size: os.cpus().length,
});

const common = require("./common");
const pathVars = require("./pathVars");
const pageVars = require("./pageVars");

//---------------------------------- output -----------------------------------//
const packageJson = require("./../package.json");
const entryConfig = {
  /*第三方库*/
  //vendor: Object.keys(packageJson.dependencies)
};

let pages = pageVars.getPages();
//console.log("pages", pages);
pages.forEach(function (page) {
  entryConfig[page["chunkName"]] = page["entryJs"];
});

//---------------------------------- output -----------------------------------//

let outputConfig = {
  path: pathVars.distPath,
  //publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
  filename: "[name]/index.js",
  assetModuleFilename: "images/[name]_[hash][ext][query]",
  //chunkFilename: '[name]/index_[hash].chunk.js'
};

//---------------------------------- plugin -----------------------------------//
let pluginConfig = [
  // new webpack.ProvidePlugin({
  //   THREE: require.resolve("three"),
  // }),
  // new webpack.DllReferencePlugin({
  //   context: pathVars.rootPath,
  //   manifest: require(pathVars.dllPath + "/manifest.json"),
  // }),
  new MiniCssExtractPlugin({
    filename: "[name]/index.css",
  }),
  new HappyPack({
    id: "babel",
    loaders: ["babel-loader"],
    threadPool: happyThreadPool,
  }),
];

pages.forEach(function (page) {
  let htmlPlugin = new HtmlWebpackPlugin({
    title: "page1",
    template: page["filePath"],
    filename: page["htmlName"],
    inject: "body",
    chunks: [page["chunkName"]],
  });
  console.log(page);
  pluginConfig.push(htmlPlugin);
});

//console.log("pluginConfig", pluginConfig);

module.exports = {
  cache: {
    type: "filesystem",
 },
  mode: "development",
  entry: entryConfig,
  //output属性与webpack-dev-server有冲突
  output: outputConfig,
  resolve: common.resolve,
  devServer: {
    compress: true,
    static: {
      directory: pathVars.devPath,
      publicPath: "/",
    },
    hot: true,
    host: "localhost",
    // host: '192.168.1.115',
    // host: '192.168.1.63',
    port: 6002,
    proxy: {
      '/api': {  // 代理路径
          target: 'http://192.168.1.33:9100', // 目标地址
          changeOrigin: true, // 允许跨域
          pathRewrite: { '^/api': '' }, // 重写路径
      },
  },
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        include: [pathVars.srcPath],
        exclude: [pathVars.nodeModulesPath],
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
              publicPath: "../",
            },
          },
          //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.tpl$/i,
        use: [
          {
            loader: "raw-loader",
            options: {
              esModule: false,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: pathVars.nodeModulesPath,
        include: pathVars.srcPath,
        use: ["babel-loader"],
        //use: ["happypack/loader?id=babel"]
      },
      {
        test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
        type: "asset/resource",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        //利用HappyPack打包，图片会损坏。暂时不使用
        //use: ["happypack/loader?id=url"]
      },
      {
        test: /\.(glsl|vs|fs|vert|frag)$/,
        exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
        use: ["raw-loader", "glslify-loader"],
      },
    ],
  },
  plugins: pluginConfig,
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
        },
      },
    },
  },
};