Webpack,react,babel

First of all, now the Webpack tutorial has been many, the reason for writing this is because of their own in the beginning of the construction process, and did not find a better tutorial, spent a lot of time, so has this blog, convenient small white students to Learn.

Node environment is not described here, Package.json files are as follows

{  "name": "wn",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    " Start ":" webpack-dev-server--hot--inline "  },  " author ":" ",  " license ":" ISC ",  " devdependencies ": {    "babel-loader": "^6.2.4",    "babel-preset-es2015": "^6.13.2",    "babel-preset-react": "^6.11.1",    "css-loader": "^0.23.1",    "node-sass": "^3.8.0",    "react": "^15.3.0",    "react-dom": "^15.3.0",    "sass-loader": "^4.0.0",    "style-loader": "^0.13.1",    "stylus": "^0.54.5",    "stylus-loader": "^ 2.1.1 ",    " url-loader ":" ^0.5.7 ",    " webpack ":" ^1.13.1 ",    " webpack-dev-server ":" ^1.14.1 "  }}

There is a pit, is babel-preset-react this plug-in, babel-loader es2015 This plugin is parsing es6 syntax, babel-preset-react This plugin is parsing react syntax, This plugin is integrated into the es2015 in mac, but there is no integration in window, which causes the compilation to Fail.

Get this file and the direct command line NPM install is Complete. Ps: "start": "webpack-dev-server--hot--inline" This configuration is the command that is executed when NPM start is entered, This will start the localhost:8080 interface, which will be automatically refreshed after this page is Saved.

Next is the webpack.config.js file, which I wrote a lot of notes, not explained.

There is a list of loader on the official website, you can add your own use http://webpack.github.io/docs/list-of-loaders.html

Module.exports = {    //locate The source file location in log, as in sass sourcemap    devtool: ' source-map ',    //webpack-dev-server config    devserver: {        historyapifallback:true,        hot:true,        inline:true,        progress:true,    },    // Page Portal File configuration    entry: ' page/index.js ',    //ingress file output config    : {        filename: ' bundle.js '    },    Module: {        //loader configuration, These loader will parse files in different formats and then package them together into a JS file        loaders: [            {test:/\.css$/, loader: ' style-loader! Css-loader '},            {test:/\.scss$/, loader: ' style!css!sass?sourcemap '},            {test:/\.styl$/, loader: ' Style-loader!css-loader!stylus-loader '},            {test:/\. ( Png|jpg) $/, loader: ' url-loader?limit=8192 '},            {test:/\.js$/, loader: "babel-loader", query: {presets: [' es2015 ', ' React '}}        ]    },    //other solution configuration    resolve: {        //auto-extension file suffix name, meaning we require module can omit not to write suffix name        Extensions: [', '. js ', '. json ', '. scss ', '. styl '],    }};

Here is the homepage index.html

<! DOCTYPE html>
Index.js file
Import React from ' React ' import reactdom from ' react-dom ' Reactdom.render (  <div>hello world</div>  document.getElementById (' App ')
File directory
After executing npm start in the root directory, open the browser http://localhost:8080, the page will automatically refresh each time the file is modified, which is packaged in memory and will not generate a packaged technician File.
Bundle files are packaged after the Webpack command is Executed.
Next will add React-router and redux and other more advanced library, goodbye!
Webpack,react,babel