• This repository has been archived on 16/Jan/2018
  • Stars
    star
    2,208
  • Rank 20,899 (Top 0.5 %)
  • Language
    JavaScript
  • Created over 10 years ago
  • Updated almost 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[OUTDATED] Starter template for React with webpack. Doesn't focus on simplicity! NOT FOR BEGINNERS!

webpack/react-starter

Starter template for react and webpack.

Features

  • Compilation with webpack
  • React and jsx
  • react-router
  • Stylesheets can be CSS, LESS, SASS, Stylus or mixed
  • Embedded resources like images or fonts use DataUrls if appropriate
  • A simple flag loads a react component (and dependencies) on demand.
  • Development
    • Development server
    • Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
    • Uses SourceUrl for performance, but you may switch to SourceMaps easily
  • Production
    • Server example for prerendering for React components
    • Initial data inlined in page
    • Long Term Caching through file hashes enabled
    • Generate separate css file to avoid FOUC
    • Minimized CSS and javascript
  • Also supports coffee-script files if you are more a coffee-script person.
  • You can also require markdown or text files for your content.

Local Installation

Install node.js or io.js

Just clone this repo and change the origin git remote.

npm install

Installation via Vagrant

Install vagrant

vagrant up
vagrant ssh
cd /vagrant

Development server

# start the webpack-dev-server
npm run dev-server
# wait for the first compilation is successful

# in another terminal/console
# start the node.js server in development mode
npm run start-dev

# open this url in your browser
http://localhost:8080/

The configuration is webpack-dev-server.config.js.

It automatically recompiles and refreshes the page when files are changed.

Also check the webpack-dev-server documentation.

Hot Module Replacement development server

# start the webpack-dev-server in HMR mode
npm run hot-dev-server
# wait for the first compilation is successful

# in another terminal/console
# start the node.js server in development mode
npm run start-dev

# open this url in your browser
http://localhost:8080/

The configuration is webpack-hot-dev-server.config.js.

It automatically recompiles when files are changed. When a hot-replacement-enabled file is changed (i. e. stylesheets or React components) the module is hot-replaced. If Hot Replacement is not possible the page is refreshed.

Hot Module Replacement has a performance impact on compilation.

Production compilation and server

# build the client bundle and the prerendering bundle
npm run build

# start the node.js server in production mode
npm run start

# open this url in your browser
http://localhost:8080/

The configuration is webpack-production.config.js.

The server is at lib/server.js

The production setting builds two configurations: one for the client (build/public) and one for the serverside prerendering (build/prerender).

Legacy static assets

Assets in public are also served.

Build visualization

After a production build you may want to visualize your modules and chunks tree.

Use the analyse tool with the file at build/stats.json.

Loaders and file types

Many file types are preconfigured, but not every loader is installed. If you get an error like Cannot find module "xxx-loader", you'll need to install the loader with npm install xxx-loader --save and restart the compilation.

Common changes to the configuration

Add more entry points

(for a multi page app)

  1. Add an entry point to make-webpack-config.js (var entry).
  2. Add a new top-level react component in app (xxxRoutes.js, xxxStoreDescriptions.js, xxxStores.js).
  3. (Optional) Enable commonsChunk in webpack-production.config.js and add <script src="COMMONS_URL"></script> to app/prerender.html.
  4. Modify the server code to require, serve and prerender the other entry point.
  5. Restart compilation.

Switch devtool to SourceMaps

Change devtool property in webpack-dev-server.config.js and webpack-hot-dev-server.config.js to "source-map" (better module names) or "eval-source-map" (faster compilation).

SourceMaps have a performance impact on compilation.

Enable SourceMaps in production

  1. Uncomment the devtool line in webpack-production.config.js.
  2. Make sure that the folder build\public\debugging is access controlled, i. e. by password.

SourceMaps have a performance impact on compilation.

SourceMaps contains your unminimized source code, so you need to restrict access to build\public\debugging.

Coffeescript

Coffeescript is not installed/enabled by default to not disturb non-coffee developer, but you can install it easily:

  1. npm install coffee-redux-loader --save
  2. In make-webpack-config.js add ".coffee" to the var extensions = ... line.

License

Copyright (c) 2012-2015 Tobias Koppers Gittip donate button

MIT (http://www.opensource.org/licenses/mit-license.php)

More Repositories

1

webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
JavaScript
64,550
star
2

webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
JavaScript
7,796
star
3

tapable

Just a little module for plugins.
JavaScript
3,724
star
4

webpack-cli

Webpack's Command Line Interface
JavaScript
2,552
star
5

webpack-dev-middleware

A development middleware for webpack
JavaScript
2,489
star
6

webpack.js.org

Repository for webpack documentation and more!
MDX
2,213
star
7

docs

[OLD] documentation for webpack
JavaScript
1,456
star
8

enhanced-resolve

Offers an async require.resolve function. It's highly configurable.
JavaScript
920
star
9

memory-fs

[DEPRECATED use memfs instead] A simple in-memory filesystem. Holds data in a javascript object.
JavaScript
882
star
10

analyse

analyse web app for webpack stats
JavaScript
879
star
11

webpack-pwa

Example for a super simple PWA with webpack.
JavaScript
809
star
12

loader-utils

utils for webpack loaders
JavaScript
765
star
13

react-webpack-server-side-example

Example of an react application with webpack including server-side rendering.
JavaScript
460
star
14

node-libs-browser

[DEPRECATED] The node core libs for in browser usage.
JavaScript
449
star
15

watchpack

Wrapper library for directory and file watching.
JavaScript
375
star
16

webpack-with-common-libs

webpack with some common libraries
JavaScript
340
star
17

loader-runner

Runs (webpack) loaders
JavaScript
299
star
18

webpack-sources

Source code handling classes for webpack
JavaScript
260
star
19

changelog-v5

Temporary repo for the changelog for webpack 5
253
star
20

schema-utils

Options Validation
JavaScript
241
star
21

meeting-notes

Webpack core team meeting notes.
188
star
22

concord

[WIP] concord modules specification
156
star
23

example-app

[OUTDATED] example web app for webpack
JavaScript
138
star
24

fastparse

A very simple and stupid parser, based on a statemachine and regular expressions.
JavaScript
65
star
25

enhanced-require

[CURRENTLY UNMAINTAINED] Enhance the require function in node.js with support for loaders which preprocess files. This is a standalone polyfill for features of webpack.
JavaScript
64
star
26

playground

In-browser playground for webpack
JavaScript
59
star
27

analyse-tool

A tool to analyse your webpack build result. It allows to browse the compilation and points out options to optimize the build.
JavaScript
55
star
28

hot-node-example

Example for HMR in a node.js process
JavaScript
54
star
29

source-list-map

Fast line to line SourceMap generator.
JavaScript
39
star
30

benchmark

Run benchmarks for webpack.
JavaScript
38
star
31

core

[OBSOLETE in webpack 2] The core of webpack and enhanced-require...
JavaScript
26
star
32

media

25
star
33

voting-app

An application for casting votes on new webpack features and fixes.
JavaScript
22
star
34

tooling

A collection of reusable tooling for webpack repos.
JavaScript
20
star
35

graph

[DEPRECATED] Converts JSON stats from webpack to a nice SVG-Image.
JavaScript
13
star
36

template

[DEPRECATED] Create a new web app from a template.
JavaScript
10
star
37

webpack.github.com

webpack.github.com
JavaScript
10
star
38

management

Mission, Goals, projects and budget for webpack
6
star
39

github-org-overview

Scans all repos of a github organization and check if published
JavaScript
5
star
40

the-big-test

[OUTDATED] the big webpack/enhanced-require test
JavaScript
5
star
41

meetup-2018-05-08

QA for the webpack meetup in Munich
4
star
42

v4.webpack.js.org

Hosting for old version of webpack documentation
3
star
43

jquery-wpt-module

[DEPRECATED] webpack-template-module for jquery
JavaScript
2
star
44

bootstrap-wpt-module

[DEPRECATED] webpack-template-module for twitter's bootstrap
JavaScript
2
star
45

github-wiki

The server-side code (heruko) for serving the wiki as gh-pages.
JavaScript
2
star
46

enhanced-resolve-completion-demo

[OUTDATED] demo for the request completion of enhanced-resolve
JavaScript
2
star
47

webpack-tests-example

DEPRECATED (use mocha-loader now): A simple example for doing tests with webpack and mocha.
JavaScript
2
star