Question

我想知道使用Webpack开发服务器时是否可以在本地主机中使用干净的URL？我所说的干净的url是，例如，当我键入http://localhost:8080/about时提供服务about.html页面，而不必键入http://localhost:8080/about.html

这可能吗？这是我的Webpack文件的内容。

const glob = require('glob');
const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const generateHTML = () => glob.sync('./src/*.html').map(
    dir => new HtmlWebpackPlugin({
        filename: path.basename(dir),
        template: dir,
    }),
);

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    ...generateHTML()
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
});

Answer 1

尝试将每个html文件另存为目录中的 index.html 。例如：about/index.html：

const generateHTML = () => glob
  .sync('./src/*.html')
  .map(dir => new HtmlWebpackPlugin({
    filename: path.join(path.basename(dir, '.html'), 'index.html'),
    template: dir,
  })
)

这样，您应该可以转到 localhost：8080 / about ，它实际上将加载 localhost：8080 / about / index.html 。

希望这会起作用。

使用Webpack时，如何在本地主机中使用干净的URL？

1 个答案: