Webpack 开发服务器 - 不显示 index.html
Webpack Dev Server - Not displaying index.html
当我转到 localhost:5000 时,我的 index.html 文件未加载。有没有办法让 Webpack Dev Server 获取我的 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 and following the Webpack HTML documentation 进行设置。所以现在我的文件结构和 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,
},
};
当我转到 localhost:5000 时,我的 index.html 文件未加载。有没有办法让 Webpack Dev Server 获取我的 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 and following the Webpack HTML documentation 进行设置。所以现在我的文件结构和 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,
},
};