Front-end novice How to build webpack+react development environment

Step: First ensure that there is a node and NPM environment. run Node-v and npm-v to see the version number to determine

Attention:

Initialize the NPM environment and install the plugin:

No items: you want to create a project under the window command

There are items:CD to the corresponding project

After entering, run NPM init (initialize) Follow the steps to confirm Yes

The Package.json file is eventually generated.

All dependency management projects that use NPM, the root directory will have a file, the file

Describes the basic information of the project and some third-party dependency plugins

Installing plugins

Using Webpack as the build tool, you need to install the appropriate plugin to run NPM install Webpack

It is best to check the version number after installation: If it is too low, the following webpack configuration currently supports versions below version 2.0.

Want more than 3.0 is the component mode configuration: Upgrade mode:

NPM Update Webpack--dev-save

Or: Yarn update webpack--dev-save (if yarn recommendations are installed)

webpack-dev-server--save-dev to install two plugins.

Webpack-dev-server This is the webpack development of the operating environment

Successful installation such as:

using react, install the appropriate plugin and run NPM I react react-dom--save to install two plugins.

Successful installation such as:

Webpack and react are installed, the view Package.json can see more devdependencies and dependencies two items, the root directory is also one more Node_ Modules folder.

devdependencies to download multiple development dependency packages. Do not download each.

Copy the required development dependencies into the Package.json:

perform npm install

If an error is presented, one possibility is that node version is too low. There is no yarn solution available to try:

Download yarn to perform NPM i yarn-g first

After completion, the yarn install can be executed;

Configure Webpack.config.js

webpack.config.js and webpack.production.config.js Two files can be introduced into the existing mature version. The currently introduced version only supports versions below Webpack 2.0

Webpack.config.js

Node command require the Webpack we installed is looking for this JS file under Main

Entry Entry file: New./APP/INDEX.JSX is required as a portal file, and only this entry file is currently in the project.

Output is a bundle.js,js and CSS are in the inside, when the release of the code will appear.

Resolve Expansion: Indicates support for three different formats. "" is index.js suffix can be omitted

Different types of files, using different loader

Loaders is the main part we want to modify to introduce someone else's config file. What you need. Write what?

generally not. Super Strict mode. Missing colon, etc. will be an error .

Create a new index.tmpl.html page in the app directory

All configuration files are ready.

In Package.json, the commands shown in Windows are encapsulated as NPM start and then run NPM start or yarn start

reason for failure: See if the version of Webpack installed is below 2.0. is consistent with the Webpack version number in Package.json

cause of Error: The introduction of other people's dependency package has less or sass

The solution is: Perform NPM install node-gyp-g first

Also install. NET or Visual Studio (desk)

Front-end novice How to build webpack+react development environment