Webpack Study (Fri)-webpack+react+es6

If you've seen the previous article in the Webpack Learning series, the next thing to do is simple: Webpack study (iv)-webpack-dev-server

React is developing quickly, and now most of the projects that develop react will use this combination: WEBPACK+REACT+ES6

Or a project for example, the project Package.json is generated, "devdependencies" are installed on their own, if the copy of the information on the Internet, can be directly generated NPM install. In order to explore the specific development process of react, or their own installation is better.

Project directory:

Package.json

{  "name": "Pro4",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    " Build ":" Webpack ",    " dev ":" Webpack-dev-server--inline--hot--config webpack.config.js "  },  " author ":" ", "  License": "ISC",  "Devdependencies": {    "Babel-core": "^6.18.2", "    Babel-loader": "^6.2.7",    "babel-preset-es2015": "^6.18.0",    "babel-preset-react": "^6.16.0",    "Css-loader": "^0.26.0",    "React": "^15.4.0",    "React-dom": "^15.4.0",    "React-hot-loader": "^3.0.0-beta.6",    "Style-loader": "^ 0.13.1 ",    " Webpack ":" ^1.13.3 ",    " Webpack-dev-server ":" ^1.16.2 "  }}

Index.html

<! DOCTYPE html>
　　
Webpack.config.js
var path = require ("path"), Module.exports = {  entry:[    './src/js/app.js '  ],  output: {    path: Path.resolve ('./', "dist"),    Publicpath: "Build",    filename: "Bundle.js"  },  module: {      loaders: [          { Test:/\.js?$/, exclude:/node_modules/,  loaders: [' babel?presets[]=react,presets[]=es2015 ']},          {test:/\. css$/, loader: ' Style!css '}      ]    },  resolve:{        extensions:[', '. js ', '. json '    },};
　　
Src/js/app.js
Import React from ' React ', import reactdom from ' React-dom ', import Helloworld from './helloworld ';//reactdom.render//(&L T Helloword/>,document.getelementbyid (' content ');//); Reactdom.render (
　　
Src/js/helloword.js
Import React from ' React ', import reactdom from ' React-dom '; class Helloworld extends React.component{constructor (props) { Super (props);} Render () {return (
Installation: NPM Init
Start: npm Run Dev
Project Address: http://localhost:8080/index.html
Description
1) The "Devdependencies" item contained in this example is Package.json, which is the least installation of WEBPACK+REACT+ES6 development. This example hot load, modify any one src/js under the JS file, save, the browser automatically updated.
2) This example does not install React-hot-loader, because it is installed directly, the current version of one to 3.0 or more, and does not support the writing in Webpack.config.js:
{test:/\.js?$/, exclude:/node_modules/, loaders: [' react-hot ', ' babel-loader?presets[]=react,presets[]=es2015 ']},
If you write, Webpack-dev-server will make an error:
　　
Module build failed:Error:React Hot loader:the Webpack Loader are now exported separately
　　
However, using the lower version of the React-hot-loader will not error.
And you'll find that you don't have to react-hot-loader now, or you can heat load.
3) JS Loader:
{test:/\.js?$/, exclude:/node_modules/,  loaders: [' babel?presets[]=react,presets[]=es2015 ']},
It is important to first use Babel-loader to convert ES6 (es2015), react Syntax (JSX) to the currently universally supported syntax of the browser, ES5.
If there is an error in this configuration, or if you do not install 2 loader except Babel, an error will be
Module Build failed:SyntaxError:Unexpected Token
Because the HTML tag you wrote in return is not recognized (not a string).
4) Support ES3 syntax if you want to be compatible with older browsers. Also need to use Es3ify-loader. This example is not used.
Webpack Study (Fri)-webpack+react+es6