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

update #9

Merged
merged 2 commits into from
Nov 17, 2015
Merged

update #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eca02b9
optimizing rebundling - Note that the setup loses type checking
bebraw Sep 1, 2015
efb7b5b
Use a neater setup for automatic browser refresh
bebraw Sep 1, 2015
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
16 changes: 11 additions & 5 deletions content/Automatic-browser-refresh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
When **webpack-dev-server** is running it will watch your files for changes. When that happens it rebundles your project and notifies browsers listening to refresh. To trigger this behavior you need to change your *index.html* file in the `build/` folder.

*build/index.html*
**build/index.html**

```html
<!DOCTYPE html>
Expand All @@ -9,21 +9,24 @@ When **webpack-dev-server** is running it will watch your files for changes. Whe
<meta charset="UTF-8"/>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>
```

We added a script that refreshes the application when a change occurs. You will also need to add an entry point to your configuration:

*webpack.config.js*
**webpack.config.js**

```javascript
var path = require('path');

module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/main.js')
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
Expand All @@ -34,4 +37,7 @@ module.exports = {
Thats it! Now your application will automatically refresh on file changes.

## Default environment
In the example above we created our own *index.html* file to give more freedom and control. It is also possible to run the application from **http://localhost:8080/webpack-dev-server/bundle**. This will fire up a default *index.html* file that you do not control. It also fires this file up in an iFrame allowing for a status bar to indicate the status of the rebundling process.

In the example above we created our own *index.html* file to give more freedom and control. It is also possible to run the application from **http://localhost:8080/webpack-dev-server/bundle**. This will fire up a default *index.html* file that you do not control. It also fires this file up in an iFrame allowing for a status bar to indicate the status of the rebundling process.

> I discuss an alternative, `inline` based approach at the [Developing with Webpack](http://survivejs.com/webpack_react/developing_with_webpack/) chapter of *SurviveJS - Webpack and React*.
27 changes: 16 additions & 11 deletions content/Optimizing-rebundling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
You might notice after requiring React JS into your project that the time it takes from a save to a finished rebundle of your application takes more time. In development you ideally want from 200-800 ms rebundle speed, depending on what part of the application you are working on.

> IMPORTANT! This setup a minified, production version of React. As a result you will lose `propTypes` based type validation!

## Running minified file in development

Instead of making Webpack go through React JS and all its dependencies, you can override the behavior in development.

*webpack.config.js*
**webpack.config.js**

```javascript
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
Expand All @@ -12,25 +16,26 @@ var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
config = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
resolve: {
alias: {
'react': pathToReact
}
},
alias: {
'react': pathToReact
}
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}],
noParse: [pathToReact]
}
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}],
noParse: [pathToReact]
}
};

module.exports = config;
```

We do two things in this configuration:

1. Whenever "react" is required in the code it will fetch the minified React JS file instead of going to *node_modules*
Expand Down