jlongster / backend-with-webpack Goto Github PK
View Code? Open in Web Editor NEWA simple server using webpack as a build tool
A simple server using webpack as a build tool
is there anyway to shutdown gulp when webpack's off?
I tried to run (http://localhost:3000/static/) it out of the box, and got an error from:
Uncaught ReferenceError: io is not defined
main.js:3 (anonymous function)
versions:
I think your es6 demo is not work correct.
{
test: /\.js$/,
exclude: /node_modules/,
include: [path.join(__dirname, 'src')],
loader: 'babel',
query: {
presets: ['es2015']
}
}
Above works fine.
gulp.task('client-server', function(cb){
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
console.log(`start client-server ${SERVER_JS_PATH}`)
webpack({
entry: {
server: "./src/client/static/js/server.js"
},
output: {
filename: 'server.js',
path: SERVER_JS_PATH
},
plugins:[
new webpack.IgnorePlugin(/\.(css|scss)$/),
new webpack.NormalModuleReplacementPlugin(/\.(css|scss)$/, 'node-noop')
],
externals: nodeModules,
module: {
loaders:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}, function(err, stats){
if(err){
console.log(err)
} else {
cb()
}
})
})
after compling for server.js , when run it , throw Error: Cannot find module "./index.scss"
Hello @jlongster,
I'm have interest to this project, but I can't launch it. I got error after update backend code:
Listening on port 4000...
Error: listen EADDRINUSE :::4000
seems some problem with this line in src/main.js:
server.listen(4000);
so nodemon.restart(); in Gulpfile not work correctly, can you help me with it?
Not project specific but I wasn't sure where to ping you - Have you managed to get a webpack bundled node app working with React Router? The context seems to get lost causing issues like this remix-run/react-router#1093
My issue owner-based and parent-based contexts differ (values:
undefinedvs
function (props, context)`
I'm basically following along with your tutorial with my own config but no luck getting it working. Wasn't sure who else to ask! (The project is here btw https://github.com/jarsbe/book-shelf/tree/isomorphic)
var webpack = require('webpack'),
fs = require('fs'),
path = require('path');
var node_modules = fs.readdirSync('node_modules').filter(function(x) { return x !== '.bin' });
module.exports = {
entry: './server/app.js',
target: 'node',
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.local']
},
output: {
path: './dist/scripts',
filename: 'server.js',
libraryTarget: 'commonjs2'
},
node: {
__filename: true,
__dirname: true,
console: true
},
externals: node_modules,
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=1&optional=runtime' },
{ test: /\.local$/, loader: 'css-loader/locals?module!less-loader' },
{ test: /\.css$/, loader: 'null-loader' }
]
}
}
In your awesome post you recommend to use #eval-source-map
setting to optimize build performance. While performance really growth, this setting does not work with support-source-map
module - it can read either external file or inline source map at the end of file, but not that magic which webpack generates for eval-*
option. Do you know about this? Probably it's worth to notice this fact in post. Or describe how to configure all this staff properly, if you know how.
Anyway, great thanks for your posts, they became a best webpack tutorial for me.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.