webpack/react-starter

Starter template for react and webpack.

功能

  • 使用webpack编译
  • React 和 jsx
  • react-router
  • 样式表可以是CSS, LESS, SASS, Stylus 或者 mixed
  • 嵌入式资源如图像或字体 use DataUrls if appropriate
  • A simple flag loads a react component (and dependencies) on demand.
  • 开发模式
    • 开发服务器
    • Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
    • Uses SourceUrl for performance, but you may switch to SourceMaps easily
  • 生产模式
    • 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
  • 如果你用coffee-script,同时支持coffee-script文件.
  • You can also require markdown or text files for your content.

本地安装

安装 node.js 或者 io.js

Just clone this repo and change the origin git remote.

npm install

通过Vagrant安装

安装 vagrant

vagrant up
vagrant ssh
cd /vagrant

开发服务器

# 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/

配置文件是 webpack-dev-server.config.js.

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

Also check the webpack-dev-server documentation.

热模块替换开发服务器

# 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/

配置文件是 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.

生产编译和服务器

# 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/

配置文件是 webpack-production.config.js.

服务是 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.

建立可视化

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.

加载器和文件类型

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.

对配置通用变化

添加更多的入口点

(为多页应用)

  1. 添加入口到 make-webpack-config.js (var entry).
  2. app (xxxRoutes.js, xxxStoreDescriptions.js, xxxStores.js)里添加新的 top-level react 组建.
  3. (可选) 启用 commonsChunkwebpack-production.config.js 和 添加 <script src="COMMONS_URL"></script>app/prerender.html.
  4. 修改服务器代码到到需求, 服务和预渲染其它入点.
  5. 重启编译.

转换 devtool 到 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.

在产品环境里启动SourceMaps

  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.

许可证

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

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