Webpack+babel+es6+react Environment Construction

Webpack+babel+es6+react Environment Setup Step: 1 Create a project structure Note: First create a project directory react this name customization , and then go to this directory below

mkdir  App    //Create app directory to hold project source files mkdir  dist   //Create dist directory  to store packaged file Touch  . Gitignore  // Create. Gitignore  to add git ignored files touch   webpack.config.js   //Create Webpack Profile CD app//    enter into app directory  Touch  index.js  //Create an index file entry file in the app directory  mkdir  component  //create componet directory to install components

2 Initializing a project

NPM init-y

finish the above two steps and get the project directory as:3 Installing Webpack

NPM Install Webpack--save

Note: After the installation is complete, a Node_modules folder will be generated under the project directory to hold the NPM package4 Open the Webpack.config.js file and add a configuration item

Module.exports = {context:__dirname+ "/app",//source file directory entry:{app: "./index.js"//In source file directory go down to find Index.js file as packaged entry file}, OU tput:{path:__dirname+ "/dist",//generated file directory filename: "[name].bundle.js"//generated file name means entry below app}}

　　

5 Enable NPM to run Webpack--Add a command to the Package.json file

{  "name": "React",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1",    "dev": "./node_modules/.bin/webpack"   // This command is newly added  },  "keywords": [],  "author": "",  "license": "ISC",  "dependencies": {    " Babel ":" ^6.23.0 ",    " Babel-core ":" ^6.23.1 ",    " Babel-loader ":" ^6.3.2 ",    " babel-preset-es2015 ":" ^ 6.22.0 ",    " Webpack ":" ^2.2.1 "  }}

　　

Note: After the addition is complete, you can package and compile JS files via npm run dev. 6 Create a new index.html file under the Dist directory and introduce a packaged JS fileindex.html File Contents:

<! DOCTYPE html>
　　
Index.js File Contents:
Doucment.write ("Hello World!!!!")
　　
  Executing the npm run dev command will generate a app.bundle.js file under the Dist directory to run the index.html file to see the effect
 6 using ES6 to install the relevant loader via Babel
NPM Install Babel-loader babel-core babel-preset-es2015--save
Modify the Webpack.config.js configuration file to add a rule
Module.exports = {    context:__dirname+ "/app",    entry:{        app: "./index.js"    },    output:{        path:_ _dirname+ "/dist",        filename: "[name].bundle.js"    },    module:{        rules:[            {                test:/\.jsx $/,                exclude:/node_modules/, use                : [{                    loader: "Babel-loader",                    options: {presets: ["React", " Es2015 "]}                }],            },                ]}    }
　　
7 Adding React support
NPM Install react react-dom babel-preset-react--save
Note: Here is the pit: error when installing, the biggest problem is because our project name is called react in the Package.json file has a Name property value of react only need to change this react value to other can be installed on theModify the app below Index.js file
Import React from ' React ', import reactdom from ' React-dom '; class Indexcomponent extends react.component{    render () { C1/>return 
NPM Run Dev then runs the index.html file to see the effect
Modify Dist below index.html file
<! DOCTYPE html>
　
8 Add style support for installing Css-loader and Style-loader
NPM Install Css-loader Style-loader--save
　
Modify Configuration webpack.config.js configuration file
Module.exports = {    context:__dirname+ "/app",    entry:{        app: "./index.js"    },    output:{        path:_ _dirname+ "/dist",        filename: "[name].bundle.js"    },    module:{        rules:[            {                test:/\.jsx?$/,                exclude:/node_modules/, use                : [{                    loader: "Babel-loader",                    options: {presets: ["React", "es2015"] }                }],            },            {   //the content here is the new added support for Styles                test:/\.css$/, use                : ["Style-loader", "Css-loader"],            },        ]    }}
　　
Modify the Index.js file
Import React from ' React ', import reactdom from ' React-dom ', import styles from './css/index.css '; This content belongs to the newly added class Indexcomponent extends react.component{    render () {        return 
　　
Create a new CSS directory under the app directory and create a new Index.css file in the CSS directory
H1{color:green;}
　　
npm Run Dev compiles and then runs the index.html file in the Dist directory to see the effect9 addWeb Server SupportInstalling Webpack-dev-server
NPM Install Webpack-dev-server--save
Modify the Package.json file to:
"Dev": "./node_modules/.bin/webpack"
Modified to:
"Dev": "./node_modules/.bin/webpack-dev-server--content-base Dist"
　　
  npm Run Dev and then enter http://loaclhost:8080 in the browser to see the effect


Webpack+babel+es6+react Environment Construction