Question

我的节点应用程序未读取我的webpack输出文件（名为bundle.js），当我从heroku打开应用程序时收到的错误是“拒绝从'https://enigmatic-scrubland-67448.herokuapp.com/dist/bundle.js'执行脚本，因为它的MIME类型（' text / html'）不可执行，并且启用了严格的MIME类型检查。”以及“无法加载资源：服务器的响应状态为404（未找到）”。

const path = require('path');
const webpack = require('webpack');
const CLIENT_DEST = path.join(__dirname, './client/dist');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    watch: true,
    mode: 'development',
    entry: ['./client/src/index.js'],
    output: { 
        path: CLIENT_DEST, 
        filename: 'bundle.js',
        publicPath: '/' 
            },
    devServer: {
       historyApiFallback: true,
       publicPath: '/'
            },
    module: {  
        rules: [ 
            {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            },
            exclude: [
              /node_modules/
            ]
        },
        {
            test: /\.css$/,
            loader: [ 'style-loader', 'css-loader',
                ]
        
        },
        {
            test: /\.ttf$/,
            loaders: [
              'url-loader'
            ]
          },
          {
            test: /\.(svg|gif|png|eot|woff|ttf)$/,
            loaders: [
              'url-loader'
            ]
          },
        {
            test: /\.scss$/,
            exclude:/node_modules/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 2,
                            localIdentName: '[name]__[local]__[hash:base64:5]'
                        }
                    },{
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            })
        },
        {
            test: /\.(png|jp(e*)g|svg)$/,  
            use: [{
                loader: 'url-loader',
                options: { 
                    limit: 8000, // Convert images < 8kb to base64 strings
                    name: 'images/[hash]-[name].[ext]'
                } 
            }]
        }

      ]
  },
  node: {
    __dirname: true,
    },
    resolve: {
        extensions: ['.js','.scss']
    },
  plugins: [
      new ExtractTextPlugin({ filename: 'index.css', allChunks: true }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ]
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
  <meta name="keywords" content="miles college, miles, pmm, miles college pmm, purple marching machine, purple, marching, machine, pmm weekend, weekend, day, pmm day, ">
  <meta http-equiv="Cache-Control" content="no-cache">
  <!-- Css Files -->
  <link rel="stylesheet" href="index.css">
  <base href="/" />
  <title>PMM Weekend Official Website</title>
</head>

<body>



  <!-- Js Files -->
  <script src="https://checkout.stripe.com/checkout.js"></script>
  <script src="/dist/bundle.js" type="text/javascript"></script>
</body>

</html>

Answer 1

我有同样的问题。不确定您的package.json是什么样，但是请确保其中包含以下两个脚本：

“开始”：“ node server.js”，（或具有服务器连接的根文件的任何文件名） “ postinstall”：“ webpack -p”

Heroku在您的package.json中查找这两个脚本，我有启动脚本，但没有安装后的脚本。添加完后，它立即解决了该问题。

从Stephen Grider那里得到了这个：https://www.youtube.com/watch?v=Ru3Rj_hM8bo

希望这会有所帮助！

Heroku无法读取我的Node Pack Webpack捆绑包文件

1 个答案: