[Engineering development] http://localhost:8080/ access, Cannot GET / solution

When configuring and using the plugin from scratch, a webpack packaging exception occurs. Exception: Cannot GET / when accessing an address (http://localhost:8080/) after the packaging is completed.
insert image description here
solution:

  1. Configure when installing the plugin: webpack-dev-serve.
	// 注意:package.json文件中的scripts节点的dev里面加一个 serve。
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve"
  },
  1. After the second plug-in: html-webpack-plugin is installed, it also needs to be configured (forgot to configure it at this position, resulting in the exception of Cannot GET/).
// 注意:webpack.config.js文件中进行配置。
// 1. 导入html插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');

// 2. 创建 html 插件的实例对象
const htmlPlugin = new HtmlPlugin({
    
    
  template: './src/index.html',                     // 指定原文件的存放路径
  filename: './index.html',                         // 指定生成文件的存放路径
});

module.exports = {
    
    
  entry: path.join(__dirname,'./src/index.js'),     // 打包入口文件的路径
  output: {
    
    
    path: path.join(__dirname,'./dist'),            // 输出文件的存放路径
    filename: 'bundle.js'                           // 输出文件的名称
  },
  // devServer: {
    
    
  //   open: true,                                  // 初次打包完成自动浏览
  //   host: '127.0.0.1',                           // 实时打包所使用的主机地址
  //   port: 80                                     // 实时打包所使用的端口号
  // },
  // 3. 通过Plugins节点,使htmlPlugin插件生效
  plugins:[htmlPlugin],                             
  "mode": 'development'      // mode用来指定构建模式。可选值:development和production。
} 

After the configuration is complete, the problem is solved.

Guess you like

Origin blog.csdn.net/YBJ2022/article/details/129311426