Webpack4 build a simple React16 development environment from zero configuration

Last Update:2018-07-22 Source: Internet

Author: User

Tags server port

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Written in the first

Summer vacation want to learn react, found react official online did not explain how to build react development environment, many online looking for is based on WEBPACK3, or directly use scaffolding, so take advantage of the holiday, a little learning the next webpack, began to build their own react project. The first time to write a blog, if there are errors, please point out, thank you!

After that also will continue to update from zero build react family bucket series, react+react-router+redux+es6. I hope you have a lot of support.

Description

The development environment is Windows 10
Technical Stack version

Node 10.3.0
NPM 6.1.0
Webpack 4.16.1
React 16.4.1
Babel-core 6.26.3
Babel-loader 7.1.5
Babel-preset-env 1.7.0
Babel-preset-react 6.24.1

Initialize Project

Create a folder and enter

mkdir react-start&& cd React-start

```
Initializing the Package.json file
```

NPM init-y

-y means to fill in by default

Webpack

Installing Webpack

NPM I webpack webpack-cli-d

-d means saving to development dependencies

In Webpack4, both Webpack and WEBPACK-CLI need to be installed, because they are managed separately in Webpack4

New Webpack Development configuration file

Touch Webpack.config.js

Webpack.config.js

Const PATH = require (' path '= {    //  ingress file     entry: {        './src/ Index.js '    },    //  output to dist folder, file name is bundle.js    output: {         ' Bundle.js ',        path:path.resolve (__dirname,'./dist ')    }}

Create a new SRC directory and create a new Index.js file inside.

mkdir Touch Index.js

Enter in Index.js

Console.log (' Hello world! ');

Enter the Package.json file and add "build" to the scripts

  "Scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "build": "Webpack"   }

Go back to the root directory and enter NPM run build on the command line

NPM Run Build

You can see the following to indicate that the compilation was successful

As you can see, what does a webpack command do?

This is explained by the official website, and if webpack.config.js exists, the webpack command will choose to use it by default.

We can also use the webpack--config webpack.config.js command to specify the configuration file

Now let's test it and create a new index.html in the Dist folder.

Index.html

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "Utf-8" />    <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">    <title>Page Title</title>    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"></Head><Body>    <Scriptsrc= "./bundle.js"></Script></Body></HTML>

Open index.html in your browser to see the console output Hello world!

So far, we have completed the basic Webpack configuration.

React

Below we formally start to build react
Installing React and React-dom

NPM Install react React-dom--save

can also be abbreviated as:

NPM I react react-dom-s

Because REACT uses JSX syntax, we need Babel to compile it.

NPM i babel-core babel-loader babel-preset-env babel-preset-react-d

Where Babel-core is the core file, Babel6 recommends using BABEL-PRESET-ENV to convert ES2015 and later versions, babel-preset-react can convert JSX syntax

Create a new Babel configuration file under the root directory. BABELRC

Touch . BABELRC

Modify Webpack.config.js, add Babel-loader

    module: {        rules: [            {                /\. ( JS|JSX) $/,                ' Babel-loader ',                /node_modules/            }        ]    }

Modify src folder inside Index.js

Import React, {Component} from ' React' react-dom '; Reactdom.render (    ))

Modify the index.html in the Dist folder, plus <div id= "root" ></div>

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "Utf-8" />    <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">    <title>Page Title</title>    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"></Head><Body>    <DivID= "root"></Div>    <Scriptsrc= "./bundle.js"></Script></Body></HTML>

Execute the command NPM run build to see that the compilation was successful
Open index.html with your browser and you can see

Now, the JSX syntax has been successfully compiled with Webpack.

But in development, it can be cumbersome to manually run NPM run build every time we want to compile code, so we could use plug-ins to help us automatically compile code after the code has changed.

Development using the Webpack plugin

Installing Webpack-dev-server

NPM I webpack-dev-server-d

Modify Webpack.config.js, add Devserver

    devserver: {        ,        './dist '    }

This means that the server port is set to 3000 and the default directory is dist

Modify Package.json to add a script to run the development server directly

  "Scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "build": "Webpack" ,    " Server ":" Webpack-dev-server--open "  },

Running NPM Run Server

NPM Run Server

Directly modify the contents of the Index.js, the Web server will automatically reload the compiled code

At this point, the simple react development environment has been built and completed!

Code please look at my github:https://github.com/ga-hou/react-start.

Webpack4 build a simple React16 development environment from zero configuration

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More