Skip to content

Instantly share code, notes, and snippets.

@cam5
Created September 30, 2019 18:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cam5/3338c0472f97e14134629f962a882e7f to your computer and use it in GitHub Desktop.
Save cam5/3338c0472f97e14134629f962a882e7f to your computer and use it in GitHub Desktop.
{
"name": "smartweb-version-2",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
"start": "node ./server/app.js"
},
"engines": {
"node": ">= 8.0.0",
"npm": ">= 3.0.0"
},
"dependencies": {
"axios": "^0.19.0",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"eslint": "^6.4.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"expose-loader": "^0.7.5",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"jquery": "^3.4.1",
"morgan": "~1.9.1"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"autoprefixer": "^9.4.10",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^2.1.1",
"cssnano": "^4.1.10",
"expose-loader": "^0.7.5",
"file-loader": "^3.0.1",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.5.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass": "^1.17.2",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.8.1",
"webpack-hot-middleware": "^2.25.0",
"webpack-node-externals": "^1.7.2"
}
}
/* eslint-disable global-require */
/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
main: './public/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
mode: 'development',
target: 'web',
devtool: '#source-map',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false, // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}),
],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{
// Exposes jQuery for use outside Webpack build
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery',
}, {
loader: 'expose-loader',
options: '$',
}],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new CopyWebpackPlugin([
{ from: './public/img', to: 'img' },
]),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
};
/* eslint-disable no-fallthrough */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable import/order */
/* eslint-disable no-use-before-define */
/* eslint-disable no-process-exit */
/**
* Module dependencies.
*/
const app = require('express')();
const debug = require('debug')('smartweb-version-2:server');
const http = require('http');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.dev.config.js');
/**
* Get port from environment and store in Express.
*/
const compiler = webpack(config);
const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
app.use(webpackDevMiddleware(compiler, {
noInfo: true, publicPath: config.output.publicPath,
}));
app.use(webpackHotMiddleware(compiler));
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
const port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
const bind = typeof port === 'string'
? `Pipe ${port}`
: `Port ${port}`;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(`${bind} requires elevated privileges`);
process.exit(1);
case 'EADDRINUSE':
console.error(`${bind} is already in use`);
process.exit(1);
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
const addr = server.address();
const bind = typeof addr === 'string'
? `pipe ${addr}`
: `port ${addr.port}`;
debug(`Listening on ${bind}`);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment