我从头开始使用webpack + babel创建了一个MERN入门模板。我也有用es6本身编写的webpack配置文件。它在本地计算机上正常工作。但是，在heroku部署中，它无法检测到webpack.config.babel.js文件中的es6语法。
项目结构：
- client
- .babelrc
- webpack.config.babeljs
- package.json
- server
- .babelrc
- package.json
- package.json
client / package.json
{
"name": "client",
"version": "1.0.0",
"description": "Client for MERN starter",
"engines": {
"node": "12.13.1"
},
"scripts": {
"clean": "rm -rf dist",
"start": "webpack-dev-server --hot --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "codeagni",
"license": "MIT",
"dependencies": {
"axios": "^0.19.0",
"npm-check-updates": "^4.0.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"devDependencies": {
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/preset-env": "^7.7.6",
"@babel/preset-react": "^7.7.4",
"@babel/preset-stage-0": "^7.0.0",
"@babel/register": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.3.2",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.1"
}
}
client / webpack.config.babel.js
import HtmlWebPackPlugin from 'html-webpack-plugin';
import path from 'path';
export default {
entry: {
app: './src/index.jsx'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
},
devServer: {
port: 3000,
open: true,
proxy: {
'/api': 'http://localhost:8080'
}
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
],
resolve: {
extensions: ['.js', '.jsx']
}
};
client / .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
server / package.json
{
"name": "server",
"version": "1.0.0",
"description": "Server for MERN starter",
"engines": {
"node": "12.13.1"
},
"scripts": {
"clean": "rm -rf build && mkdir build",
"build": "babel -d ./build ./src/bin/www.js -s",
"start": "npm run build && node ./build/www.js",
"dev-start": "nodemon --exec babel-node ./src/bin/www.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "codeagni",
"license": "MIT",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongoose": "^5.8.1"
},
"devDependencies": {
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/node": "^7.7.4",
"@babel/preset-env": "^7.7.6",
"@babel/register": "^7.7.4",
"babel-loader": "^8.0.6",
"nodemon": "^2.0.2"
}
}
服务器/.babelrc
{
"presets": ["@babel/preset-env"]
}
./ package.json
{
"name": "mern-starter",
"version": "1.0.0",
"description": "MERN starter full stack app",
"engines": {
"node": "12.13.1"
},
"scripts": {
"lint": "eslint --ignore-path .gitignore .",
"dev": "concurrently \"cd server && npm run dev-start\" \"cd client && npm run start\"",
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "cd client && npm install",
"server-install": "cd server && npm install",
"postinstall": "npm run client-install && npm run server-install",
"client-build": "cd client && npm run clean && npm run build",
"server-build": "cd server && npm run clean && npm run build-babel",
"build": "npm run client-build && npm run server-build"
},
"keywords": [
"mern-starter",
"mern",
"full-stack-javascript"
],
"author": "codeagni",
"license": "MIT",
"devDependencies": {
"concurrently": "^5.0.1",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"nodemon": "^2.0.2",
"prettier": "^1.19.1"
}
}
Heroku构建失败日志：
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 12.13.1
engines.npm (package.json): unspecified (use default)
Resolving node version 12.13.1...
Downloading and installing node 12.13.1...
Using default npm version: 6.12.1
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> [email protected] postinstall /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
> [email protected] postinstall /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7
> npm run client-install && npm run server-install
> [email protected] client-install /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7
> cd client && npm install
added 757 packages from 421 contributors and audited 13488 packages in 18.089s
found 0 vulnerabilities
> [email protected] server-install /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7
> cd server && npm install
added 72 packages from 47 contributors and audited 4010 packages in 4.052s
found 0 vulnerabilities
added 323 packages from 167 contributors and audited 931 packages in 34.805s
found 0 vulnerabilities
-----> Build
Running build
> [email protected] build /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7
> npm run client-build && npm run server-build
> [email protected] client-build /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7
> cd client && npm run clean && npm run build
> [email protected] clean /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client
> rm -rf dist
> [email protected] build /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client
> webpack --mode production
/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import HtmlWebPackPlugin from 'html-webpack-plugin';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at new Script (vm.js:84:7)
at NativeCompileCache._moduleCompile (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
at Module._compile (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach (<anonymous>)
at module.exports (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/cli.js:71:45
at Object.parse (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/yargs/yargs.js:567:18)
at /tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/cli.js:49:8
at Object.<anonymous> (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/tmp/build_196649106c2ea3f2c1160dd26fc5f9a7/client/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.ZLmcq/_logs/2019-12-18T14_20_10_710Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] client-build: `cd client && npm run clean && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] client-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.ZLmcq/_logs/2019-12-18T14_20_10_724Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run client-build && npm run server-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.ZLmcq/_logs/2019-12-18T14_20_10_744Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
我认为您不能在webpack.config.js文件中使用import，您应该使用require
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')