Heroku 没有读取我的 Node 应用程序的 webpack 包文件答案

【问题标题】：Heroku not reading my webpack bundle file for Node appHeroku 没有读取我的 Node 应用程序的 webpack 包文件
【发布时间】：2019-01-19 01:59:10
【问题描述】：

我的节点应用程序没有读取我的 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>

【问题讨论】：

标签： html node.js heroku webpack webpack-4

【解决方案1】：

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

"start": "node server.js", （或者你有你的服务器连接的根文件的任何文件名） “安装后”：“webpack -p”

Heroku 在您的 package.json 中查找这两个脚本。我有启动脚本，但没有安装后脚本。一旦我补充说它立即解决了这个问题。

从斯蒂芬·格里德那里得到这个：https://www.youtube.com/watch?v=Ru3Rj_hM8bo

希望这会有所帮助！

【讨论】：