Блог

Когда я захожу на localhost: 5000 моих index.html файл не загружается. Есть ли способ для сервера Webpack Dev получить мой root index.html ? Каков наилучший способ сделать это.

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

 ├── dist
│   └── main.js
├── src
│   └── app
│       └── app.js
├── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
 

webpack.dev.js:

 const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app/app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname   'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 5000,
    open: true,
  },
};
 

В итоге я использовал HtmlWebpackPlugin и следовал документации Webpack HTML для его настройки. Итак, теперь моя файловая структура и webpack.dev.js файл выглядит как показано ниже. Я переместил свой index.html в src папку. HtmlWebpackPlugin автоматически сгенерирует все <script> включения в index.html файл и создаст index.html файл в папке dist.

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

 ├── dist
│   └── // main.js and index.html will automatically be generated here
├── src
│   ├── app
│   │   └── app.js
│   └── index.html // index now in src folder
├── package-lock.json
├── package.json
└── webpack.config.js
 

webpack.dev.js:

 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Add this

module.exports = {
  mode: 'development',
  entry: './src/app/app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname   'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 5000,
    open: true,
  },
};