将 Webpack 与现有的 vanilla JS 项目一起使用会导致“Cannot GET /”错误

Question

我的简单 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 install 和 npm dev run 之后，项目编译（根据 VS Code），但我在 localhost:8080 上得到以下页面：

Cannot GET /

我花了一整天的时间试图弄清楚这一切。为什么会出现此错误？

Answer 1

正在 \dist 中创建一个新的 HTML 页面，从正确的位置引用 bundle.js 文件并将以下内容添加到 webpack.config.js 中的 module.exports :

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

最后成功了。

将 Webpack 与现有的 vanilla JS 项目一起使用会导致“Cannot GET /”错误

Using Webpack with an existing vanilla JS project results in an `Cannot GET /` error

javascript

webpack

package.json