5
Ich habe versucht, die Antwort überall zu finden, aber es scheint einfach nicht da draußen noch zu sein.Modul Erstellungsfehler: pngquant ENOENT - Webpack Build erfolgreich auf lokalen OS X, schlägt auf AWS Ubuntu 16.04 Server
Ich benutze React-Toolbox, React-Bootstrap und einige benutzerdefinierte scss. Auf meinem lokalen Computer funktioniert der Build einwandfrei. Wenn ich einen AWS Ubuntu-Server hochfahre und eine grundlegende Node-Produktionseinrichtung ausführe, schlägt der Build auf meinen Bildern fehl.
Ich benutze Image-Webpack-Loader. Ich verkette das auf dem Datei-Loader.
Hier ist meine Produktion webpack Datei (Irgendwelche Tipps zu diesem Thema sind auch super geschätzt. Immer nach unten zu lernen)
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const autoprefixer = require('autoprefixer');
const modulesPath = path.join(__dirname, 'node_modules');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
var WebpackEnvPlugin = new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
PORT: JSON.stringify(process.env.PORT)
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js',
publicPath: '/assets'
},
postcss: [autoprefixer],
resolve: {
extensions: ['', '.css', '.scss', '.js', '.json'],
},
module: {
loaders: [
{
test: /(\.js)$/,
exclude: /node_modules/,
loaders: ['babel']
},
{ test: /\.css$/,
exclude : path.join(__dirname, '/node_modules/react-toolbox/'),
loader: ExtractTextPlugin.extract("style-loader, css-loader!autoprefixer-loader") },
{
test: /\.scss$/,
exclude : path.join(__dirname, '/node_modules/react-toolbox/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
},
{
test : /(\.scss|\.css)$/,
include : path.join(__dirname, '/node_modules/react-toolbox/'),
loaders : [
require.resolve('style-loader'),
require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
require.resolve('sass-loader') + '?sourceMap'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
HtmlWebpackPluginConfig,
WebpackEnvPlugin,
new ExtractTextPlugin('css/main.css', {
allChunks: true
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
]
}
ich habe gelesen, durch die pngquant Qualität verringert, dass das Problem möglicherweise gelöst werden würde aber ich hatte kein Glück.
ich diese Art von Fehler, wenn ich für meine verschiedenen Bilder bauen:
ERROR in ./app/images/logo.png
Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ ./app/modules/listingpage/listingpage-component.js 55:11-43
ein Fehler, wo ich auch meine main.scss Datei in meinem index.js.
ERROR in ./app/stylesheets/scss/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at DependenciesBlock.onModuleBuildFailed (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at /var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at imagemin.buffer.then.catch.err (/var/www/project/node_modules/image-webpack-loader/index.js:42:9)
@ ./app/index.js 30:0-39
Und ein Fehler ich mit Ladern zu tun glauben mit:
ERROR in ./app/images/magnifying-glass.png
Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./app/stylesheets/scss/main.scss 6:6846-6890
Ich schließe meine Bilder das folgende Format verwenden:
const logo = require('../../images/logo.png');
Schließlich sind hier mein Paket. json Abhängigkeiten:
"dependencies": {
"async": "^2.0.1",
"autoprefixer": "^6.5.1",
"autoprefixer-loader": "^3.2.0",
"axios": "^0.14.0",
"babel-cli": "^6.16.0",
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.16.0",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.16.3",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.2",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"compression": "^1.6.2",
"cookie-parser": "^1.4.3",
"css-loader": "^0.25.0",
"csv": "^1.1.0",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"express-flash": "0.0.2",
"express-session": "^1.14.1",
"file-loader": "^0.9.0",
"glob": "^7.1.0",
"html-webpack-plugin": "^2.22.0",
"image-webpack-loader": "^2.0.0",
"immutability-helper": "^2.0.0",
"jquery": "^3.1.1",
"jwt-simple": "^0.5.0",
"later": "^1.2.0",
"lodash": "^4.16.3",
"moment": "^2.15.1",
"mongoose": "^4.6.1",
"morgan": "^1.7.0",
"multer": "^1.2.0",
"nodemon": "^1.11.0",
"postcss-loader": "^0.13.0",
"raw-loader": "^0.5.1",
"react": "^15.4.1",
"react-addons-css-transition-group": "^15.3.2",
"react-bootstrap": "^0.30.5",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-router-bootstrap": "^0.23.1",
"react-test-renderer": "^15.4.1",
"react-toolbox": "^1.2.3",
"redbox-react": "^1.3.1",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"request": "^2.75.0",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2"
},
"devDependencies": {
"babel-eslint": "^7.0.0",
"babel-jest": "^15.0.0",
"babel-preset-es2015": "^6.16.0",
"chai": "^3.5.0",
"css-loader": "^0.25.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"image-webpack-loader": "^2.0.0",
"jest": "^15.1.1",
"jest-cli": "^15.1.1",
"json-loader": "^0.5.4",
"mocha": "^3.1.0",
"node-sass": "^3.10.1",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "^15.3.2",
"redbox-react": "^1.3.1",
"redux-logger": "^2.6.1",
"sass-loader": "^4.0.2",
"toolbox-loader": "0.0.3",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.16.1"
}
Ich habe versucht, meine Pakete neu zu installieren und Image-Webpack-Loader neu zu installieren, um alle grundlegenden Dinge zu tun. Noch einmal, baut lokal gut, baut nicht auf Server. Ich bin mir nur nicht sicher, was ich an diesem Punkt falsch mache. Vielen Dank im Voraus für Ihre Hilfe!
Hallo, haben Sie eine Lösung dafür gefunden? Irgendwie klebte es gerade. – Zephir77167
Soweit ich mich erinnern kann (das Projekt wurde verschrottet), glaube ich, dass ich nur den image-webpack-loader aus der Image Loader-Kette entfernt habe. Ich würde vorschlagen, das zu versuchen. –