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

Question

I have the following express application:我有以下快速申请：

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);
});

On the front-end, in the public directory, I am placing all HTML and CSS files.在前端，在公共目录中，我放置了所有 HTML 和 CSS 文件。 I am giving one of the HTML files below as an example:我以下面的 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

All the JS files that each HTML file is using are placed in a ./dist folder.每个 HTML 文件正在使用的所有 JS 文件都放在./dist文件夹中。 Each JS file has been built with Webpack and Babel with the following configuration:每个 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
                }
              ]
            ]
          }
        }
      }
    ]
  }
};

Unfortunately when I ran my app on localhost:5000 .不幸的是，当我在localhost:5000上运行我的应用程序时。 The built JS files have an error of:构建的 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.

If I don't use the JS files built with webpack, my app runs correctly.如果我不使用用 webpack 构建的 JS 文件，我的应用程序可以正常运行。 What is wrong with my application here?我的申请有什么问题？

Answer 1

I found what was the mistake.我发现出了什么错误。 I was loading JS files from invalid directories, which produced the error.我正在从无效目录加载 JS 文件，这产生了错误。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-08 00:51:42

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-08 00:51:42

解决方案1
0 已采纳 2020-12-08 00:51:42