Webpack+react Development Environment Construction

I. Installing node. js

node. JS can be downloaded directly from the official website and installed in the default installation mode.

Second, installation Webpack

Webpack can install with NPM, create a new empty Practice folder, and execute the following instructions after the terminal is transferred to the folder to complete the installation.

// Global Installation NPM install-g webpack// install to your project directory npm install--save-dev webpack

Third, installation Webpack-dev-server

// Global Install npm install-g webpack-dev-server// install to your project directory npm install--save-dev Webpack-dev-server

Iv. Generating Package.json files

// generate the initial Package.json file npm init-y

Create a new two folder in the project folder:app and build, each with main.js and index.html

// Package.json {  "name": "Tic-Tac-Toe",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "Scripts": {    "test": "Echo \" Error:no Test specified\ "& & Exit 1 ",    " build ":" Webpack ",// to point the build command of NPM to the Webpack command    " Start ":" Webpack-dev-server--inline--hot "  },  " keywords ": [],  " author ":",   "license": "ISC"}

// index.html<! DOCTYPE html>src= "http://localhost:8080/ Bundle.js "></script>//Note src Properties </body>
v. New Webpack.config.js file
Create a new Webpack.config.js file under the project directory with the following contents:
Module.exports = {  entry:  + "/app/main.js",// The only entry file output that has been mentioned several times   : {     + "/build",// The place where the files are packed after filename    : "bundle.js"// file name of the output file after packaging  }}
Liu, loaders1.JSON
// installs the loader NPM install--save-dev Json-loader that can be loaded with JSON
2.Babel
// NPM installs multiple dependent modules at once, separating the modules with a space between npm install--save-dev babel-core babel-loader babel-preset-es2015 Babel-preset-react
3.react
NPM Install--save react react-dom
4.css
// installing npm install--save-dev style-loader css-loader
The final webpack.config.js file:
//Webpack.config.jsModule.exports={devtool:' Eval-source-map ', entry: __dirname+ "/app/main.js", Output: {path: __dirname+ "/build", FileName:"Bundle.js"}, module: {loaders: [{test:/\.json$/, Loader:"Json-loader"}, {test:/\.jsx?$/, exclude:/node_modules/, Loader:' Babel-loader ', query: {presets: [' es2015 ', ' react ']}}, {test:/\.css$/, Loader:' Style-loader!css-loader '//add a handle to a style sheet}]}, Devserver: {...}}
Vii. the difference between the problems encountered 1.--save-dev and--save
--save-dev is only used in the development of the dependency,-save is the project on-line also need to use the dependency.
Webpack+react Development Environment Construction