我正在尝试将用香草JS编写的简单Web应用程序部署到Heroku。我也在项目中使用了webpack 4。但是，在部署时，该过程永远不会完成。我的package.json文件如下：
{
"name": "personal-portfolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/KerronKing/Personal-Portfolio.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/KerronKing/Personal-Portfolio/issues"
},
"homepage": "https://kerron-king-portfolio.herokuapp.com/",
"devDependencies": {
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"image-webpack-loader": "^6.0.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"sass-resources-loader": "^2.0.1",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
}
}
我的webpack配置文件如下：
1）webpack.common.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.html$/i,
use: 'html-loader',
},
{
test: /\.(svg|png|jpe?g|gif)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
name: '[name].[ext]',
outputPath: 'dist/assets'
}
}
]
},
],
},
watch: true,
};
2）webpack.dev.js：
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
});
3）webpack.prod.js：
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
});
Heroku日志如下：
Kerrons-MacBook-Pro:Personal-Portfolio kerron$ heroku create kerron-king-portfolio --buildpack heroku/nodejs
Creating ⬢ kerron-king-portfolio... done
Setting buildpack to heroku/nodejs... done
https://kerron-king-portfolio.herokuapp.com/ | https://git.heroku.com/kerron-king-portfolio.git
Kerrons-MacBook-Pro:Personal-Portfolio kerron$ git push heroku master
Enumerating objects: 226, done.
Counting objects: 100% (226/226), done.
Delta compression using up to 4 threads
Compressing objects: 100% (215/215), done.
Writing objects: 100% (226/226), 1.18 MiB | 867.00 KiB/s, done.
Total 226 (delta 116), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote: NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 12.x...
remote: Downloading and installing node 12.16.1...
remote: Using default npm version: 6.13.4
remote:
remote: -----> Installing dependencies
remote: Installing node modules (package.json + package-lock)
remote:
remote: > node-sass@4.13.1 install /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/node-sass
remote: > node scripts/install.js
remote:
remote: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.1/linux-x64-72_binding.node
remote: Download complete
remote: Binary saved to /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/node-sass/vendor/linux-x64-72/binding.node
remote: Caching binary to /tmp/npmcache.8N8JR/node-sass/4.13.1/linux-x64-72_binding.node
remote:
remote: > cwebp-bin@5.1.0 postinstall /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/cwebp-bin
remote: > node lib/install.js
remote:
remote: ⚠ Command failed: /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/cwebp-bin/vendor/cwebp -version
remote: /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so.1: cannot open shared object file: No such file or directory
remote:
remote:
remote: ⚠ cwebp pre-build test failed
remote: ℹ compiling from source
remote: ✔ cwebp built successfully
remote:
remote: > gifsicle@4.0.1 postinstall /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/gifsicle
remote: > node lib/install.js
remote:
remote: ✔ gifsicle pre-build test passed successfully
remote:
remote: > mozjpeg@6.0.1 postinstall /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/mozjpeg
remote: > node lib/install.js
remote:
remote: ✔ mozjpeg pre-build test passed successfully
remote:
remote: > optipng-bin@6.0.0 postinstall /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/optipng-bin
remote: > node lib/install.js
remote:
remote: ✔ optipng pre-build test passed successfully
remote:
remote: > pngquant-bin@5.0.2 postinstall /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/pngquant-bin
remote: > node lib/install.js
remote:
remote: ✔ pngquant pre-build test passed successfully
remote:
remote: > node-sass@4.13.1 postinstall /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/node-sass
remote: > node scripts/build.js
remote:
remote: Binary found at /tmp/build_ee96feddd3422ad1eca22b0dc82492a1/node_modules/node-sass/vendor/linux-x64-72/binding.node
remote: Testing binary
remote: Binary is fine
remote: added 988 packages from 503 contributors and audited 13590 packages in 70.31s
remote:
remote: 29 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: found 49 vulnerabilities (34 moderate, 15 high)
remote: run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: -----> Build
remote: Running build
remote:
remote: > personal-portfolio@1.0.0 build /tmp/build_ee96feddd3422ad1eca22b0dc82492a1
remote: > webpack --config webpack.prod.js
remote:
remote:
remote: webpack is watching the files…
remote:
remote: Hash: 0d0c868ab364177c89a7
remote: Version: webpack 4.41.5
remote: Time: 4416ms
remote: Built at: 03/18/2020 3:17:46 PM
remote: Asset Size Chunks Chunk Names
remote: 024941f90ec96396d4ecd87a827b2cf7.png 54.8 KiB [emitted]
remote: 82893c322222ad573242cd6a1adc2202.png 19.3 KiB [emitted]
remote: ca381e2fe81b5fea2e3cbdf80323b4e9.png 52.5 KiB [emitted]
remote: dd5aa4dbe3efb9328333385709f71422.png 124 KiB [emitted]
remote: main.js 15.5 KiB 0 [emitted] main
remote: Entrypoint main = main.js
remote: [0] ./src/styles.css 562 bytes {0} [built]
remote: [2] ./node_modules/css-loader/dist/cjs.js!./src/styles.css 10.6 KiB {0} [built]
remote: [5] ./src/imgs/screen-1.png 80 bytes {0} [built]
remote: [6] ./src/imgs/screen-2.png 80 bytes {0} [built]
remote: [7] ./src/imgs/screen-3.png 80 bytes {0} [built]
remote: [8] ./src/imgs/screen-4.png 80 bytes {0} [built]
remote: [9] ./src/index.js + 2 modules 1.81 KiB {0} [built]
remote: | ./src/index.js 308 bytes [built]
remote: | ./src/dropdown.js 513 bytes [built]
remote: | ./src/scroll.js 1.01 KiB [built]
remote: + 3 hidden modules
构建过程永远不会超过此步骤。谁能帮助我解决此错误并成功部署到Heroku？预先感谢您的帮助。