Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added webpack dashboard #1123

Closed
wants to merge 3 commits into from
Closed

Added webpack dashboard #1123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9bbf388
added sass support
shrynx Dec 1, 2016
3b1c521
Merge pull request #1 from shrynx/added-sass-support
shrynx Dec 1, 2016
f13cba5
added support for webpack dashboard
shrynx Dec 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/react-scripts/config/webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ module.exports = {
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.(sass|scss)/,
/\.json$/
],
loader: 'url',
Expand Down Expand Up @@ -160,6 +161,12 @@ module.exports = {
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss'
},
// Added support for sass
{
test: /\.(sass|scss)/,
exclude: /\.module\.(sass|scss)$/,
loaders: ['style', 'css', 'sass'],
},
// JSON is not enabled by default in Webpack but both Node and Browserify
// allow it implicitly so we also enable it.
{
Expand Down
7 changes: 7 additions & 0 deletions packages/react-scripts/config/webpack.config.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ module.exports = {
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.(sass|scss)/,
/\.json$/
],
loader: 'url',
Expand Down Expand Up @@ -170,6 +171,12 @@ module.exports = {
loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// Added support for sass
{
test: /\.(sass|scss)/,
exclude: /\.module\.(sass|scss)$/,
loader: ExtractTextPlugin.extract(['css?minimize', 'sass']),
},
// JSON is not enabled by default in Webpack but both Node and Browserify
// allow it implicitly so we also enable it.
{
Expand Down
13 changes: 8 additions & 5 deletions packages/react-scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "react-scripts",
"version": "0.7.0",
"name": "super-react-scripts",
"version": "0.1.0",
"description": "Configuration and scripts for Create React App.",
"repository": "facebookincubator/create-react-app",
"repository": "shrynx/create-react-app",
"license": "BSD-3-Clause",
"engines": {
"node": ">=4"
},
"bugs": {
"url": "https://github.com/facebookincubator/create-react-app/issues"
"url": "https://github.com/shrynx/create-react-app/issues"
},
"files": [
".babelrc",
Expand Down Expand Up @@ -52,16 +52,19 @@
"http-proxy-middleware": "0.17.2",
"jest": "17.0.2",
"json-loader": "0.5.4",
"node-sass": "^3.13.0",
"object-assign": "4.1.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react-dev-utils": "^0.3.0",
"recursive-readdir": "2.1.0",
"sass-loader": "^4.0.2",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"style-loader": "^0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dashboard": "^0.2.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "1.0.0"
Expand Down
170 changes: 91 additions & 79 deletions packages/react-scripts/scripts/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,18 @@ var httpProxyMiddleware = require('http-proxy-middleware');
var detect = require('detect-port');
var clearConsole = require('react-dev-utils/clearConsole');
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
// var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
var getProcessForPort = require('react-dev-utils/getProcessForPort');
var openBrowser = require('react-dev-utils/openBrowser');
var prompt = require('react-dev-utils/prompt');
var pathExists = require('path-exists');
// var pathExists = require('path-exists');
var config = require('../config/webpack.config.dev');
var paths = require('../config/paths');
var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');

var useYarn = pathExists.sync(paths.yarnLockFile);
var cli = useYarn ? 'yarn' : 'npm';
// var useYarn = pathExists.sync(paths.yarnLockFile);
// var cli = useYarn ? 'yarn' : 'npm';
var isInteractive = process.stdout.isTTY;

// Warn and crash if required files are missing
Expand All @@ -61,6 +63,10 @@ if (isSmokeTest) {
}

function setupCompiler(host, port, protocol) {
// Create new dashboard for webpack-dashboard
var dashboard = new Dashboard();
// push the dashboard plugin to config before compiling
config.plugins.push(new DashboardPlugin(dashboard.setData))
// "Compiler" is a low-level interface to Webpack.
// It lets us listen to some events and provide our own custom messages.
compiler = webpack(config, handleCompile);
Expand All @@ -69,86 +75,90 @@ function setupCompiler(host, port, protocol) {
// recompiling a bundle. WebpackDevServer takes care to pause serving the
// bundle, so if you refresh, it'll wait instead of serving the old one.
// "invalid" is short for "bundle invalidated", it doesn't imply any errors.
compiler.plugin('invalid', function() {
if (isInteractive) {
clearConsole();
}
console.log('Compiling...');
});

var isFirstCompile = true;

// "done" event fires when Webpack has finished recompiling the bundle.
// Whether or not you have warnings or errors, you will get this event.
compiler.plugin('done', function(stats) {
if (isInteractive) {
clearConsole();
}

// We have switched off the default Webpack output in WebpackDevServer
// options so we are going to "massage" the warnings and errors and present
// them in a readable focused way.
var messages = formatWebpackMessages(stats.toJson({}, true));
var isSuccessful = !messages.errors.length && !messages.warnings.length;
var showInstructions = isSuccessful && (isInteractive || isFirstCompile);

if (isSuccessful) {
console.log(chalk.green('Compiled successfully!'));
}

if (showInstructions) {
console.log();
console.log('The app is running at:');
console.log();
console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
console.log();
console.log('Note that the development build is not optimized.');
console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
console.log();
isFirstCompile = false;
}

// If errors exist, only show errors.
if (messages.errors.length) {
console.log(chalk.red('Failed to compile.'));
console.log();
messages.errors.forEach(message => {
console.log(message);
console.log();
});
return;
}

// Show warnings if no errors were found.
if (messages.warnings.length) {
console.log(chalk.yellow('Compiled with warnings.'));
console.log();
messages.warnings.forEach(message => {
console.log(message);
console.log();
});
// Teach some ESLint tricks.
console.log('You may use special comments to disable some warnings.');
console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
}
});
// Disabling create-react-app custom messages
// compiler.plugin('invalid', function() {
// if (isInteractive) {
// clearConsole();
// }
// console.log('Compiling...');
// });
//
// var isFirstCompile = true;
//
// // "done" event fires when Webpack has finished recompiling the bundle.
// // Whether or not you have warnings or errors, you will get this event.
// compiler.plugin('done', function(stats) {
// if (isInteractive) {
// clearConsole();
// }
//
// // We have switched off the default Webpack output in WebpackDevServer
// // options so we are going to "massage" the warnings and errors and present
// // them in a readable focused way.
// var messages = formatWebpackMessages(stats.toJson({}, true));
// var isSuccessful = !messages.errors.length && !messages.warnings.length;
// var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
//
// if (isSuccessful) {
// console.log(chalk.green('Compiled successfully!'));
// }
//
// if (showInstructions) {
// console.log();
// console.log('The app is running at:');
// console.log();
// console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
// console.log();
// console.log('Note that the development build is not optimized.');
// console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
// console.log();
// isFirstCompile = false;
// }
//
// // If errors exist, only show errors.
// if (messages.errors.length) {
// console.log(chalk.red('Failed to compile.'));
// console.log();
// messages.errors.forEach(message => {
// console.log(message);
// console.log();
// });
// return;
// }
//
// // Show warnings if no errors were found.
// if (messages.warnings.length) {
// console.log(chalk.yellow('Compiled with warnings.'));
// console.log();
// messages.warnings.forEach(message => {
// console.log(message);
// console.log();
// });
// // Teach some ESLint tricks.
// console.log('You may use special comments to disable some warnings.');
// console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
// console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
// }
// });
}

// We need to provide a custom onError function for httpProxyMiddleware.
// It allows us to log custom error messages on the console.
function onProxyError(proxy) {
return function(err, req, res){
var host = req.headers && req.headers.host;
console.log(
chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
);
console.log(
'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
chalk.cyan(err.code) + ').'
);
console.log();
// hiding proxy error messages till webpack dashboard allows message pushing

// console.log(
// chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
// ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
// );
// console.log(
// 'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
// chalk.cyan(err.code) + ').'
// );
// console.log();

// And immediately send the proper error response to the client.
// Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
Expand Down Expand Up @@ -182,9 +192,11 @@ function addMiddleware(devServer) {
}));
if (proxy) {
if (typeof proxy !== 'string') {
console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
// hiding proxy error messages till webpack dashboard allows message pushing

// console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
// console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
// console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
process.exit(1);
}

Expand Down