當我轉到 localhost:5000 時，我的 index.html 檔案未加載。Webpack Dev Server 有沒有辦法獲取我的根 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,
},
};
uj5u.com熱心網友回復：
最終使用HtmlWebpackPlugin并按照 Webpack HTML 檔案進行設定。所以現在我的檔案結構和 webpack.dev.js 檔案如下所示。我把我index.html的移動到src檔案夾中。HTMLWebpackplugin 將自動生成<script>index.html 檔案中的所有包含，并將在 dist 檔案夾中創建一個 index.html 檔案。
檔案夾結構：
├── 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,
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348981.html