Question

我是webpack的新手，我有一个在本地运行良好的小项目但是当我部署到Heroku时，我收到以下错误：

GET https://guarded-garden-60077.herokuapp.com/bundle.js net::ERR_ABORTED

状态代码为404，找不到bundle.js。我认为某处有一个webpack目录路径问题，但我无法弄清楚在哪里。

Heroku日志：

2018-02-13T16:57:39.008194+00:00 heroku[router]: at=info method=GET path="/" host=guarded-garden-60077.herokuapp.com request_id=073591d7-7628-4770-b20f-fd6170a355cf fwd="75.112.231.201" dyno=web.1 connect=1ms service=28ms status=200 bytes=492 protocol=https
2018-02-13T16:57:39.076253+00:00 heroku[router]: at=info method=GET path="/bundle.js" host=guarded-garden-60077.herokuapp.com request_id=e4084c44-474c-4cbb-a429-e4e891880c63 fwd="75.112.231.201" dyno=web.1 connect=0ms service=10ms status=404 bytes=392 protocol=https

webpack.config.js：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};

module.exports = {
  entry: path.join(paths.SRC, 'index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
        use: [
          {loader: "css-loader"}
        ]
        }),
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: path.join(__dirname, './dist'),
    publicPath: './',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.DIST, '/index.html'),
    }),
    new ExtractTextPlugin('style.bundle.css'),
  ],
  devServer: {
    contentBase: './dist'
  }
};

package.json：

{
  "name": "btoz-react",
  "version": "1.0.0",
  "description": "Front-end for B To Z Blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --colors --config ./webpack.config.js",
    "build": "Webpack",
    "dev": "webpack-dev-server",
    "prod": "NODE_ENV=production node server.js --config ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.9",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.9",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  }
}

server.js：

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Minimal React-Webpack-Babel Boilerplate</title>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
</html>

文件结构：

-dist
--index.html
-node_modules
-src
--css
--js
--index.js
-package.json
-procfile
-server.js
-webpack.config.js

如何在Heroku上部署时显示此项目？感谢

Answer 1

我认为您在这里误会了。据我了解，HtmlWebpackPlugin插件将自动生成一个index.html文件，该文件是从HTML文件 template 中插入的bundle.js您在dist属性中定义的output文件夹：

output: {
  path: path.join(__dirname, './dist'),
  publicPath: './',
  filename: 'bundle.js'
},

webpack.config.js：

 new HtmlWebpackPlugin({
   template: 'src/index.html',
 }),

具有应用程序的结构：

-dist
-node_modules
-src
--css
--js
--index.js
--index.html
-package.json
-procfile
-server.js
-webpack.config.js

和index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Minimal React-Webpack-Babel Boilerplate</title>
  <body>
    <div id="app"></div>
  </body>
</html>

将Webpack项目部署到Heroku

1 个答案: