将webpack与现有的普通JS项目一起使用会导致`Cant‘t Get/`错误

Using Webpack with an existing vanilla JS project results in an `Cannot GET /` error(将webpack与现有的普通JS项目一起使用会导致`Cant‘t Get/`错误)

本文介绍了将webpack与现有的普通JS项目一起使用会导致`Cant‘t Get/`错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的简单JS Web应用程序的文件结构如下:

myproject
│   README.md
│   .gitignore
|   index.html    
└───style
│   │   style.css
│   │   style.scss
│   │   style.css.map   
│   
└───js
    │   javascript1.js
    │   javascript2.js
    |   javascript3.js
│   
└───assets
    │   someimage.png
    │   someimage2.png
    |   ...
到目前为止,我的工作流程是将SCSS编译为CSS,然后在浏览器中打开index.html。我想让工作流更高效(自动SCSS编译、热或实时重载、JS最小化等),所以我正在尝试使用像webpack这样的构建工具。我遵循a guide并将文件webpack.config.js添加到我的项目的根目录中:

module.exports = {
  entry: [
    './js/javascript1.js',
    './js/javascript2.js',
    './js/javascript3.js',
    './style/style.css'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "script-loader"
        }
      },
      {
        test: /.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
            }
          }
        ]
      }
    ]
  }
};

server.js

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));//
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);

并将一个空的bundle.js文件添加到项目根目录,并将以下标记添加到我的现有index.html

<script src="bundle.js"></script>

现在,在使用脚本添加package.json文件后

"dev": "webpack-dev-server --mode development --open"`

运行npm installnpm dev run后,项目编译(根据VS代码),但我在localhost:8080上看到以下页面:

Cannot GET /

我花了一整天的时间试图弄清楚这一切。为什么我收到此错误?

推荐答案

dist中创建新的Html页面,从正确的位置引用bundle.js文件,并在webpack.config.js中向module.exports添加以下内容:

devServer: {
  static: './dist'
},

最终奏效了。

这篇关于将webpack与现有的普通JS项目一起使用会导致`Cant‘t Get/`错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:将webpack与现有的普通JS项目一起使用会导致`Cant‘t Get/`错误

基础教程推荐