React Template Project Using webpack
There are two options to install webpack:
Almost all the configurations are done in the
webpack.config.js, the simplest one may look like this:
src folder and
src folder is the place you place all the source file, and
bin folder is the place where all webpack puts the generated bundle files.
According to the above configuration file, the entry point is
app.js and the generated bundle file is
If you edit something in
in the shell, and you would see
app.bundle.js shown in
To support ES6 and React, babel is needed:
and also create the babel rc file:
And add loader configuration in
node_modules folder is skipped to accelerate the compilation.
If you want to make ES6 API available in older browsers, install babel-polyfill and import it in your code first:
now strike the execiting command:
and import the bundle file in your html file (here,
index.html in your browser, you can see that all your code works well.
Maybe you wish to minify your generated js file, webpack provides UglifyJsPlugin to achieve that:
Also, if you want to use the production version of react, you can define your plugin to set the NODE_ENV:
webpack also supports Hot Module Replacemet. To enable this feature, first you need to install webpack-dev-server:
or install it globally:
Then, use the following command:
Open a browser to visit http://localhost:8080/, you will see your webpages and webpack will automatically regenerate bundle files if you change the source files.
Note: The default path for the generated files are the root folder of your project, if you want to change it, set publicPath to the folder you need:
The template project is here.