Express MIME 类型 ('text/html') 上的 Webpack 不可执行答案

【问题标题】：Webpack on Express MIME type ('text/html') is not executableExpress MIME 类型 ('text/html') 上的 Webpack 不可执行
【发布时间】：2021-03-17 13:58:01
【问题描述】：

我有以下快递申请：

const express = require("express");
const app = express();
const server = require("http").Server(app);
const path = require("path");
const port = process.env.PORT || 5000;

app.use('/public', express.static(path.resolve(__dirname, "../public"))); // every file under public folder is referenced as /public
app.use('/resource', express.static(path.resolve(__dirname, "../dist"))); // every file under resource folder is referenced as /resource

server.listen(port, function() {
  console.log("server is running on port", port);
});

在前端的公共目录中，我放置了所有 HTML 和 CSS 文件。我以下面的 HTML 文件之一为例：

<head>
  <title>Pllanet Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">  
  
  <script src="/resource/js/script1" defer></script>
  <script src="/resource/js/script2" defer></script>
</head>

// body

每个 HTML 文件使用的所有 JS 文件都放置在 ./dist 文件夹中。每个 JS 文件都是用 Webpack 和 Babel 构建的，配置如下：

const path = require('path');
const glob = require('glob');

module.exports = {
  entry: Object.fromEntries(glob.sync(path.resolve(__dirname, 'src/js/*.js')).map((v) => [
    path.basename(v, '.js'), v,
  ])),
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  "useESModules": true
                }
              ]
            ]
          }
        }
      }
    ]
  }
};

不幸的是，当我在 localhost:5000 上运行我的应用程序时。构建的JS文件有错误：

Refused to execute script from 'http://localhost:5000/resource/js/main/flip_auto.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

如果我不使用通过 webpack 构建的 JS 文件，我的应用程序可以正常运行。我的申请有什么问题？

【问题讨论】：

你能分享你创建的包文件和项目结构吗？

标签： javascript node.js express webpack

【解决方案1】：

我发现了错误所在。我正在从无效目录加载 JS 文件，这产生了错误。

【讨论】：