Webpack Building React Project

Look at the routine excavator, do not see the old driver. This is a boilerplate

1. Create a new project directory folder, called seed

CD SEEDNPM Init

Then always enter, last yes, and eventually generate a Package.json file

2. Create the following

• src folder for storing source code and referenced static files such as Js,css,img
• . BABELRC Babel Compiler configuration file
• Favicon.ico an icon that is read by default in the browser
• Index.html Entrance Home
• Webpack.config.js webpack configuration file

3. Installing NPM packages with NPM

Install Webpack Webpack-dev-server--save-dev

Webpack and Webpack-dev-server are packaged tools and auxiliary development servers that can hot-load code, automatically refresh pages, and proxy servers to resolve Cross-domain issues during front-end development
See http://www.cnblogs.com/fengnovo/p/5983638.html

NPM Install Babel-core babel-loader babel-preset-es2015 babel-preset-react Babel-preset-stage-0--save-dev

These are the NPM packages of the Babel Compiler.

Install css-loader postcss-loader Style-loader--save-dev

Webpack processors that need to process style file packaging

Install react React-dom--save

Two basic NPM packages for the REACT project

Add a "start" to the scripts corresponding key in Package.json: "webpack-dev-server--port=3000--inline--host 0.0.0.0--colors--hot",
This allows you to start a development server with NPM start on the command line and code for real-time hot-update Development.

" Scripts " : {    "start""webpack-dev-server--port=3000--inline--host 0.0.0.0--colors--hot",    "test"" echo \ "error:no Test specified\" && exit 1 "   },

4.webpack.config.js configuration, directly on the code

Module.exports ={entry: __dirname+'/src/main.js',//indicates the entry output at the start of compilation: {path: __dirname+'/bundle.js'//indicate The directory where the compiled files are located}, module: {//webpack processor module, What to process and what processor is loader loaders:[{tes T:/\.js$/, Exclude:/node_modules/, Loader:'Babel'//babel processor, Handling Jsx/es6/es7},{test:/\.css$/, Exclude:/node_modules/, Loader:'Style-loader!css-loader'//handling Css,style Style}]}, solove: ["','. js','. JSX'//import file does not write suffix, can automatically find. jsx and. js suffix files], devserver: {//webpack-dev-server configuration, with Webpack-dev-server--port=3000--inline--host 0.0.0.0--col Ors--hot Phase Contentbase:'./', Colors:true, Inline:true, Historyapifallback:true    }}

5. Configure the webpack, the inside of the Babel just tell Webpack with Babel processing js, but also configure Babel processing which file format, directly on the code

{    "presets": [        "react",         " es2015 " ,         " stage-0 "     ]}

6.inde.html

<! DOCTYPE html>
The./bundle.js is the output file path that is configured in Webpack.config.js and is then introduced by index.html
7. You need to create a new main.js in the SRC directory as the portal compilation file mentioned in the Webpack.config.js configuration
Import React from ' React' react-dom '; Reactdom.render (    <div>hello world</div>, document.getElementById (' app '))
Boilerplate routines, that's it.
Project Location Github:https://github.com/fengnovo/diary/tree/master/seed
Webpack Building React Project