webpack4 webpack-dev-server react-router 二级路由对应 js路径问题

Question

问题原因我也找到了，就是访问/components/hd-layout 的时候请求的 js对应的url应该是：

http://localhost:6006/static/js/0.chunk.js)

可是现在多了一个 components，如下：

http://localhost:6006/components/static/js/0.chunk.js)

所以才会报错，但是我不知道如何在访问二级路由的时候去掉这个 components，如何解决？

webpack.server.dev.js

const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const postcssPresetEnv = require("postcss-preset-env");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const resolve = dir => path.join(__dirname, ".", dir);
const isProd = process.env.NODE_ENV === "production";
const { version, name, description } = require("../package.json");
const docsDir = path.join(process.cwd(), "docs");

module.exports = {
  mode: "development",
  entry: { [name]: "./src/index.js" },
  output: {
    // path: resolve("dist"), // 输出目录
    path: docsDir,
    filename: "static/js/[name].min.js",
    chunkFilename: "static/js/[name].chunk.js",
    umdNamedDefine: true, // 是否将模块名称作为 AMD 输出的命名空间
    //不加下面几行，被引用会被报错
    libraryTarget: "umd", // 采用通用模块定义
    library: [name]
  },
  // 解决预览刷新404问题
  devServer: {
    historyApiFallback: true
  },
  devtool: "#source-map",
  module: {
    rules: [
      {
        test: /\.md$/,
        use: "raw-loader"
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(pc|sc|c)ss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              sourceMap: true,
              plugins: () => [
                postcssPresetEnv({
                  stage: 3,
                  features: {
                    "custom-properties": true,
                    "nesting-rules": true
                  },
                  browsers: "last 2 versions"
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 819200
            }
          }
        ]
      }
    ]
  },
  resolve: {
    enforceExtension: false,
    extensions: [".js", ".jsx", ".json", "pcss", ".less", ".css"]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "static/css/[name].min.css",
      chunkFilename: "static/css/[name].chunk.css"
    }),
    //预览
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../public/index.html"), //指定要打包的html路径和文件名
      filename: "./index.html" //指定输出路径和文件名
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  //压缩js
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
        cssProcessor: require("cssnano"),
        cssProcessorOptions: {
          discardComments: { removeAll: true },
          safe: true,
          autoprefixer: false
        },
        canPrint: true
      })
    ]
  }
};

router.js

import React from "react";
import loadable from "@loadable/component";
import RouteViewer from "../components/RouteViewer";
import Loading from "../components/Loading";

const IntroductionPage = loadable(() => import("../pages/IntroductionPage"), { fallback: <Loading /> });
const QuicklyPage = loadable(() => import("../pages/QuicklyPage"), { fallback: <Loading /> });
const ThemePage = loadable(() => import("../pages/ThemePage"), { fallback: <Loading /> });
const HdLayoutPage = loadable(() => import("../pages/HdLayoutPage"), { fallback: <Loading /> });
const HdMasterPage = loadable(() => import("../pages/HdMasterPage"), { fallback: <Loading /> });

const routes = [
  {
    key: "1",
    name: "介绍",
    path: "/",
    exact: true,
    component: IntroductionPage
  },
  {
    key: "2",
    name: "快速上手",
    path: "/quickly",
    component: QuicklyPage
  },
  {
    key: "3",
    name: "主题设置",
    path: "/theme",
    component: ThemePage
  },
  {
    key: "4",
    name: "组件",
    path: "/components",
    component: RouteViewer,
    routes: [
      {
        key: "41",
        name: "HdLayoutPage",
        path: "/components/hd-layout",
        component: HdLayoutPage
      },
      {
        key: "42",
        name: "HdMasterPage",
        path: "/components/hd-master",
        component: HdMasterPage
      }
    ]
  }
];

export default routes;

Answer 1

已解决，在 output属性里面添加：publickPath:'/'

output: {
    //
    publicPath: "/"
...

参考：

• https://juejin.im/post/5ae9ae...
• https://juejin.im/post/5cb53c...
• https://webpack.docschina.org...
• https://stackoverflow.com/que...