Skip to content
Permalink
Browse files

simplification of webpack-dev-server, bundle entry/output directories

  • Loading branch information
johnnycoyle committed May 21, 2017
1 parent 493d19a commit 40de17144988287ff12b8bd305a865a97db978cd
Showing with 53 additions and 50 deletions.
  1. +1 −1 app/containers/App.js
  2. +16 −0 app/devpanel/index.js
  3. +3 −0 chrome/manifest.dev.json
  4. +2 −1 package.json
  5. +14 −21 server.js
  6. +17 −27 webpack.config.dev.js
@@ -103,7 +103,7 @@ class App extends Component {
<div
id={styles.bannerContainer}>
<span id={styles.bannerText}
>react rpm | real-time performance metrics</span>
>React rpm | real-time performance metrics</span>
</div>
{this.logo}
<div id={styles.message_container}>
@@ -0,0 +1,16 @@
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './../containers/App';
import 'react-hot-loader/patch';

render(
<AppContainer>
<App />
</AppContainer>, document.getElementById('root')
);

if (module.hot && module.hot.accept('./../containers/App', () => {
console.log('\n\n\n\n\nRELOAD!!!!\n\n\n\n');
render(App)
}));
@@ -16,6 +16,9 @@
"background": {
"scripts": ["background.js"]
},
"web_accessible_resources": [
"devpanel.bundle.js"
],
"manifest_version": 2,
"devtools_page": "devtools.html",
"permissions": ["<all_urls>", "tabs"],
@@ -3,7 +3,7 @@
"version": "0.1.0",
"description": "A Performance Visualization Tool for Optimization and Debugging",
"scripts": {
"dev": "node scripts/dev",
"dev": "NODE_ENV=development && node server.js",
"build": "NODE_ENV=production node scripts/build",
"test": "mocha --compilers js:babel-core/register app/**/*.test.js"
},
@@ -59,6 +59,7 @@
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.9.0",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^2.1.0",
"fbjs": "^0.8.12",
"file-loader": "^0.8.5",
"gulp": "^3.9.1",
@@ -1,25 +1,18 @@
/* eslint-disable */

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.dev');

var app = new (require('express'))();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));

app.get( '/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});

app.listen(port, function success(error) {
if (error) {
console.error(error);
} else {
console.info('==> 🌎 Listening on port %s.', port);
new WebpackDevServer(webpack(config), {
headers: {
"Access-Control-Allow-Origin": "*"
},
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
});

console.log('Listening at http://localhost:3000/');
});
@@ -1,24 +1,19 @@
var path = require('path');
var webpack = require('webpack');

const host = 'localhost';
const port = 3000;
const extpath = path.join(__dirname, './chrome/extension/');

module.exports = {
devtool: 'cheap-module-eval-source-map',
devServer: { host, port, headers: { "Access-Control-Allow-Origin": "http://localhost:3000", "Access-Control-Allow-Credentials": "true" } },
entry: {
// background: [`${extpath}background`],
devpanel: [`${extpath}devpanel`, `webpack-hot-middleware/client?path=http://${host}:${port}/__webpack_hmr`],
//devtools: [`${extpath}devtools`],
// content: [ `${extpath}content` ],
// page: [ `${extpath}page` ],
},
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
// WebpackDevServer host and port
'webpack/hot/only-dev-server',
// "only" prevents reload on syntax errors
'./app/devpanel/index.js',
],
output: {
path: path.join(__dirname, 'dev'),
filename: '[name].bundle.js',
publicPath: `http://${host}:${port}/`
filename: 'devpanel.bundle.js',
publicPath: `http://localhost:3000/`
},
plugins: [
new webpack.DefinePlugin({
@@ -28,7 +23,7 @@ module.exports = {
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new NoEmitOnErrorsPlugin()
],
module: {
rules: [{
@@ -39,17 +34,12 @@ module.exports = {
exclude: /node_modules/,
}, {
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
}
}
],
use: ['style-loader', 'css-loader?modules'],
// options: {
// modules: true,
// importLoaders: 1,
// localIdentName: '[name]__[local]___[hash:base64:5]',
// }
exclude: /node_modules/,
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,

0 comments on commit 40de171

Please sign in to comment.
You can’t perform that action at this time.