安裝Webpack,並加載一個簡單的React組件
全局的npm模塊安裝:
npm install -g webpack
安裝jsx-loader
npm install --save-dev jsx-loader
默認使用當前目錄的自己新創建的webpack.config.js作為配置文件
module.exports = { entry: [ './assets/js/entry.js' ], output: { path: __dirname + '/assets/', publicPath: "/assets/", filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?$/, loaders: ['jsx-loader?harmony'] } ] } };
定義了一個簡單的React組件hello.js,使用ES6語法
var React = require('react'); class Hello extends React.Component { render() { return ( <h1>Hello {this.props.name}!</h1> ); } } module.exports = Hello;
創建entry.js入口文件,將一個Hello組件輸出到界面:
var React = require('react'); var Hello = require('./Hello'); React.render(<Hello name="Nate" />, document.body);
創建根目錄index.html文件
<html> <head> </head> <body> <script src="/assets/bundle.js"></script> </body> </html>
項目文件夾結構:
+ assets/
- js/ Hello.js entry.js index.html webpack.config.js
在當前目錄執行webpack命令之后,在assets目錄將生成bundle.js,打包了entry.js的內容
webpack
通過npm安裝Webpack開發服務器並啟動它:
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
好現在可以通過http://localhost:8080/webpack-dev-server/index.html打開頁面,如下:
[轉載] http://www.cnblogs.com/fastmover/p/4867599.html