I'm seeing upload failures that don't make sense. It happens only if a file does NOT exists on the remote. Once I manually upload the dist folder and then rerun the build command, everything works as expected.
npm run build
> webpack-babel-react-revisited@ build /Users/bas/Documents/Projects/Digibitious.SchokWebsite
> webpack -p --env.production --env.platform=web --progress
clean-webpack-plugin: /Users/bas/Documents/Projects/Digibitious.SchokWebsite/dist has been removed.
Hash: 68d797da305bdadb1cd8
Version: webpack 3.10.0
Time: 5767ms
Asset Size Chunks Chunk Names
assets/images/afbeelding-1-assets/[email protected] 78.9 kB [emitted]
assets/images/8ec7f5aa9e00069455fa0183081740c3.png 131 kB [emitted]
assets/app.js 163 kB 0 [emitted] main
assets/css/styles.css 98.6 kB 0 [emitted] main
index.html 34.9 kB [emitted]
over.html 7.29 kB [emitted]
assets/images/afbeelding-1-assets/[email protected] 25.6 kB [emitted]
assets/images/d65a8acf3a4236db31b93475e11ff30f.svg 959 kB [emitted] [big]
assets/images/afbeelding-1-assets/[email protected] 44.7 kB [emitted]
assets/images/afbeelding-1-assets/[email protected] 83.8 kB [emitted]
assets/images/afbeelding-1-assets/[email protected] 90.6 kB [emitted]
assets/images/afbeelding-1-assets/[email protected] 141 kB [emitted]
assets/images/afbeelding-1-assets/[email protected] 238 kB [emitted]
assets/images/afbeelding-1-assets/[email protected] 315 kB [emitted] [big]
assets/images/afbeelding-1.psd 11 MB [emitted] [big]
[2] ./src/js/app.js 515 bytes {0} [built]
[3] ./src/scss/style.scss 41 bytes {0} [built]
[4] ./src/images/[email protected] 96 bytes {0} [built]
[5] ./src/images/face.svg 96 bytes {0} [built]
[6] (webpack)/buildin/global.js 509 bytes {0} [built]
[8] ./src/js/bundle.js 5.6 kB {0} [built]
[9] ./src/js/portfolio.js 790 bytes {0} [built]
[10] ./src/js/analytics.js 508 bytes {0} [built]
[11] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?name=assets/css/[name].[ext]!./src/scss/style.scss 98.9 kB [built]
+ 6 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 35.7 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
Child html-webpack-plugin for "over.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/over.html 7.7 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js?name=assets/css/[name].[ext]!src/scss/style.scss:
[0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?name=assets/css/[name].[ext]!./src/scss/style.scss 98.9 kB {0} [built]
+ 1 hidden module
upload failure : assets/images/8ec7f5aa9e00069455fa0183081740c3.png ===> /demo/assets/images/8ec7f5aa9e00069455fa0183081740c3.png
Times: 0.04s Files: 15
/Users/bas/Documents/Projects/Digibitious.SchokWebsite/node_modules/deploy-kit/lib/deploy.js:116
if (err) throw err
^
Error: /demo/assets/images/8ec7f5aa9e00069455fa0183081740c3.png: No such file or directory
at makeError (/Users/bas/Documents/Projects/Digibitious.SchokWebsite/node_modules/ftp/lib/connection.js:1067:13)
at Parser.<anonymous> (/Users/bas/Documents/Projects/Digibitious.SchokWebsite/node_modules/ftp/lib/connection.js:113:25)
at Parser.emit (events.js:160:13)
at Parser._write (/Users/bas/Documents/Projects/Digibitious.SchokWebsite/node_modules/ftp/lib/parser.js:59:10)
at doWrite (_stream_writable.js:407:12)
at writeOrBuffer (_stream_writable.js:393:5)
at Parser.Writable.write (_stream_writable.js:290:11)
at Socket.ondata (/Users/bas/Documents/Projects/Digibitious.SchokWebsite/node_modules/ftp/lib/connection.js:273:20)
at Socket.emit (events.js:160:13)
at addChunk (_stream_readable.js:269:12)
at readableAddChunk (_stream_readable.js:256:11)
at Socket.Readable.push (_stream_readable.js:213:10)
at TCP.onread (net.js:602:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-babel-react-revisited@ build: `webpack -p --env.production --env.platform=web --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-babel-react-revisited@ 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! /Users/bas/.npm/_logs/2018-02-06T09_40_00_362Z-debug.log
// We are using node's native package 'path'
// https://nodejs.org/api/path.html
const path = require('path');
let webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractSass = new ExtractTextPlugin({filename: "assets/css/styles.css"});
const CleanWebpackPlugin = require('clean-webpack-plugin');
const DeployPlugin = require('deploy-kit/plugins/ftp-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { readFileSync } = require('fs');
const ftpCred = readFileSync('.ftp-credentials', 'utf8').trim();
module.exports = (env = {}) => {
const isProduction = env.production === true;
const isDevelopment = env.development === true;
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js'),
REMOTE: '/demo'
};
let conf = {
entry: path.join(paths.JS, 'app.js'),
output: {
path: paths.DIST,
filename: 'assets/app.js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(paths.SRC, 'index.html'),
chunks: ['main']
}),
new HtmlWebpackPlugin({
filename: 'over.html',
template: path.join(paths.SRC, 'over.html'),
chunks: ['main']
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
}),
ExtractSass,
new CleanWebpackPlugin(['dist']),
new CopyWebpackPlugin([{ from: 'src/images/content/', to: 'assets/images/'}])
],
// Loaders configuration
// We are telling webpack to use "babel-loader" for .js and .jsx files
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: [{
loader: 'babel-loader',
options: {
presets: [
['es2015', {modules: false}]
]
}
}]
},
{
test: /\.(scss)$/,
use: ExtractSass.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: [{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader?name=assets/css/[name].[ext]" // compiles Sass to CSS
}]
})
},
{
test: /\.(png|jpg|gif|svg)$/,
loaders: [
'file-loader?hash=sha512&digest=hex&name=assets/images/[hash].[ext]'
]
},
{
test: /\.(eot|woff|ttf)$/,
loaders: [
'url-loader?name=fonts/images/[name].[ext]'
]
}
]
},
// Enable importing JS files without specifying their's extenstion
//
// So we can write:
// import MyComponent from './my-component';
resolve: {
extensions: ['.js']
}
};
// environment specific
if (isProduction) {
conf.plugins.push(new DeployPlugin({
server: ftpCred,
workspace: paths.DIST,
deployTo: paths.REMOTE,
rules: [
{
test: /dist\/(.*)$/,
// $1, $2... means the parenthesized substring matches
// [$n] will be replaced with matched string
dest: '/[$1]'
},
]
}));
}
return conf;
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent