Webpack packaging a simple react component

Install Webpack and load a simple react component

Global NPM Module Installation:

NPM install-g Webpack

Installing Jsx-loader

NPM Install--save-dev Jsx-loader

Default to use the current directory's own newly created webpack.config.js as the configuration file

Module.exports = {    entry: [      './assets/js/entry.js '    ],    output: {        + '/assets/' ,        " /assets/",        ' bundle.js '    },    module: {        loaders: [          /\.jsx?$/, loaders: [' Jsx-loader?harmony '}        ]}    };

Defines a simple react component hello.js, using ES6 syntax

var React = require (' React '); class Hello extends React.component {  render () {    return  (      /c5>this .props.name}!    );  

Create a entry.js portal file and output a Hello component to the interface:

var React = require (' React '); var Hello = require ('./hello '); React.render (
Create the root directory index.html file
Project folder structure:
+ assets/    -js/        Hello.  JS        entry.  Jsindex. htmlwebpack.config.js    
After the Webpack command is executed in the current directory, the assets directory will generate Bundle.js, packaging the contents of the Entry.js
Webpack
Install the Webpack Development Server via NPM and start it:
NPM Install Webpack-dev-server-g
Webpack-dev-server--progress--colors
OK now you can open the page via http://localhost:8080/webpack-dev-server/index.html, as follows:
[Reprint] Http://www.cnblogs.com/fastmover/p/4867599.html
Webpack packaging a simple react component