Блог

Главная - Вопросы по программированию - Почему бы не index.html страницы отображаются при использовании многостраничного веб-пакета и реагируют

Почему бы не index.html страницы отображаются при использовании многостраничного веб-пакета и реагируют

#webpack #webpack-dev-server

Вопрос:

Страницы без индекса не будут отображаться с помощью сервера разработки webpack

Это структура папок, страницы выполнены с атомарным дизайном, а страницы находятся в App.js как маршруты.

Структура Папок

webpack.config.js

It is a multiple page configuration. Start point is the index which loads the App.js containing the Home page as /. Router is react-router-dom

 const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

const pages = ["index", "about", "app", "home", "broadcasteroverview", "directory", "login","register", "schedule","settings", "station"]

module.exports = {

  devServer: {
    static: {
      directory: path.join(__dirname, './public/pages'),
    },
    compress: true,
    port: 3001,
  },
  // entry: "./src/index.js",
  // output: {
  //   filename: "bundle.js",
  //   path: path.resolve(__dirname, "build"),
  // },
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template: "./src/index.html",
  //   }),
  // ],
  entry: {
    index : './src/index.js',
    app : './src/App.js',
    home : './src/ui/pages/Home.js',
    about : './src/ui/pages/About.js',
    broadcasteroverview : './src/ui/pages/BroadCasterOverview.js',
    directory : './src/ui/pages/Directory.js',
    login : './src/ui/pages/Login.js',
    register : './src/ui/pages/Register.js',
    schedule : './src/ui/pages/Schedule.js',
    settings :'./src/ui/pages/Settings.js',
    station :'./src/ui/pages/Station.js',
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
  plugins: [].concat(
    pages.map(
      (page) =>
        new HtmlWebpackPlugin({
          inject: true,
          template: `./public/pages/${page}.html`,
          filename: `${page}.html`,
          chunks: [page],
        })
    )
  ),
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /.(png|svg|jpg|jpeg|gif|ico)$/i,
        type: 'asset/resource',
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  
};

Example non-index route

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
Метки: