React getting started using Webpack with the environment (i)

React getting started with the environment (i)

If you want to get started directly and skip the tedious process of working with the environment, it is recommended that you use the official Create-react-app command

NPM install-g create-react-app  // install Create-react-app scaffolding   NPM for the Node. JS package Management tool, Make sure you have the Node. JS installed create-react-app my-app    // created with create-react-app, My-app for Project name CD my-app/     // go to My-app directory npm start        // Run Project

Now open the Http://localhost:3000/and you can see the initial interface.

I am not willing to use the official Self-brought this scaffold, is because its webpack configuration is too complex, I am relatively dull to see not understand, but also hope that the great God can study thoroughly share.

How do I create-react-app the internal webpack configuration file?

NPM Run Eject

Source

Every time I look at the tutorial I like to run the project first, and then a line of code to Understand. If you are also:

git clone https://github.com/lingjiawen/helloreact.gitcd helloreact/npm installnpm run Dev

first, Create the project structure

Create a new folder named Helloreact

The IDE I'm using is Sublime .

Organize your project structure within this folder:

|--app                       // Project Components   |--components                  // component Structure      |---hello.jsx   |--main.js                     // ingress file |--build                     // project build file   |-- index.html                 // Index html
|--. BABELRC                  Babel transcoding Tool configuration file
|--package.json              //npm documentation, which can be understood as package management files |--webpack.config.js         //webpack configuration files 

Copy the following code in Build/index.html:

<! DOCTYPE html>
React code into main, and Bundle.js is webpack packaging generated JS file, Here you can help it to write down the following see and then come back to see it clear.
Enter the following code in Package.json:
Note that all comments are not entered!
//Package.json{  "name": "helloreact",//Project Name"version": "1.0.0",//Project Version"main": "webpack.config.js",        "scripts": {    "start": "webpack",//the configuration of NPM start  },  "author": "",//author"license": "ISC",  "devdependencies": {    //Debugging Dependencies"babel-core": "^6.25.0",    "babel-loader": "^7.1.1",    "babel-plugin-react-transform": "^2.0.2",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "react": "^15.6.1",    "react-dom": "^15.6.1",    "react-transform-hmr": "^1.0.4",    "webpack": "^3.4.1",  },  "description": "",  "dependencies": {    //Project Dependencies  }}
Enter the following code in the Webpack configuration file webpack.config.js:
varWebpack = require (' webpack ');//introduction of the Webpack module, Note that this can only be introduced using ES5 syntaxModule.exports={entry: __dirname+ "/app/main.js",//Unique Portal Fileoutput: {path: __dirname+ "/build",//where the packaged bundle.js files are storedFilename: "bundle.js"//the file name after packaging}, module: {//Loaders Loaderloaders: [{test:/\. (js|jsx) $/,//Matches the loaders of files that are processed by the extension, such as jsx and JS filesLoader: ' Babel-loader '//name of the loader}]}, plugins: [NewWebpack. Hotmodulereplacementplugin ()//Hot Module Replacement plug-in    ]};
. BABELRC is a configuration file for the Babel transcoding that converts ES6 code into ES5 code and also supports REACT syntax conversions
Enter the following code in The. babelrc:
//. BABELRC{  "presets": [    "react",    "es2015"  ],  "env": {    "development": {      "plugins": [        [          "react-transform",          {            "transforms": [              {                "transform": "react-transform-hmr",                "imports": [                  "react"                ],                "locals": [                  "module"                ]              }            ]          }        ]      ]    }  }}
Enter the following code in App/components/hello.jsx:
Import React from ' React ';       // introduction of React // Create a component Class: first letter must be capitalized class Hello extends React.component {    render () {        return  (            <div>hello world!</div>        )    }}// Export component default Hello;
React uses JSX instead of regular JavaScript.
JSX is a JavaScript syntax extension that looks much like XML.
It appears to be the syntax for writing XML directly in JavaScript code, but essentially a syntactic sugar, and each XML tag is converted to pure JavaScript code by the JSX conversion tool (such as Babel)
Enter the following code in App/main.js:
// main.jsimport React from ' React 'react-dom './components/hello.jsx '; Reactdom.render (    ));
second, the operation of the project
Open command line, CD to helloreact folder directory, run
NPM Install
This command installs all dependent files for package.json, and after the installation is complete, run:
NPM start
The NPM start command was just what you defined in Package.json:
"scripts": {    "start": "webpack",  }
Note: only start can omit run, others need to add run, such as NPM run dev;
You will find that there are more bundle.js files in build.js, which are the packaged files that you defined in Webpack.config.js:
var webpack = require (' webpack '); // introduction of the Webpack module, Note that this can only be introduced using ES5 syntax  = {    ...    Output: {        + "/build",// The place where the bundle.js file is stored in        filename: "bundle.js"      //  The file name after packaging     },    ...};
Open the index.html under this directory and see the following output running Successfully:
third, Add the Hot replacement module
The project is ready to run, but every time the code is lost, NPM start is packaged, and there is no way to endure it, which requires the use of the Webpack-dev-server hot-swap module, What you see is the resulting
In fact, in the previous code, in order to avoid trouble, I have secretly replaced the hot replacement module part of the configuration added to
Webpack.config.js in the
... plugins: [        new Webpack. Hotmodulereplacementplugin ()// hot module Replacement plugin     ] ...
Package.json in the
"devdependencies": {    ...    " Babel-plugin-react-transform ":" ^2.0.2 ",    " REACT-TRANSFORM-HMR ":" ^1.0.4 ",    " Webpack-dev-server ":" ^2.6.1 "    ...  }
and, in Babelrc.
"env": {    "development":{      "plugins": [        [          "react-transform",          {             "transforms": [              {                "transform": "react-transform-hmr",                "imports" : [                  "react"                ],                "locals": [                  "module"                ]              }            ]          }        ]      ]    }  }
You can remove the code and find that it can be packaged and run Properly. Because the hot load was not used before
I want to use it now, how to use it?
Very simply, add in the Package.json:
...  " Scripts ": {    " Start ":" webpack ",    " Dev ":" webpack-dev-server "  } ...
okay, now run NPM running Dev.
Open localhost:8080
gee, How is the list of files, oh Oh oh, The original is not configured default path;
...  " Scripts ": {    " Start ":" webpack ",    --contentbase= './build ' "  } ... ... ..
Rerun NPM Run Dev:
Modify APP/COMPONENTS/HELLO.JSX
Save and then go back to the page and find that the page has been updated automatically:
React getting started using Webpack with the environment (i)