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

Using Webpack with an existing vanilla JS project results in an `Cannot GET /` error(将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 install和npm dev run后，项目编译(根据VS代码)，但我在localhost:8080上看到以下页面：

Cannot GET /

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

推荐答案

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

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

最终奏效了。

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