Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to build a Webpack+Babel+React development environment". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to build a Webpack+Babel+React development environment" can help you solve your doubts.

1. Get to know Webpack

Before building the application, let's take a look at Webpack. Webpack is a module packaging tool that can compile and package various files (such as ReactJS, Babel, Coffeescript, Less/Sass, etc.) as modules.

two。 Install Webpack

We first need to install it in the global environment before we can start developing with Webpack in the project.

Npm install webpack-g

3. Create a project

After installation, create a project called learn-webpack and go to the project folder. Of course, you can name the project as you want.

Mkdir learn-webpack & & cd learn-webpack

Find the project folder you just created through the editor

Now let's create two files:

App.js

Document.querySelector ('# app') [xss_clean] = 'Hello Worldwide'

Index.html

Learn-webpack

Then execute it at the terminal.

Webpack. / app.js. / dist/bundle.js

Finally, execute to start the local http service

Python-m SimpleHTTPServer

At this point, you can type: http://localhost:8000 in the browser.

If you can see Hello world in the browser! That means you have successfully packaged and compiled main.js into bundle.js using Webpack. Isn't it easy?

Define a profile

The above is just a brief introduction to the use of Webpack. In fact, each project should include a webpack.config.js to tell Webpack what to do.

Module.exports = {entry: "app.js", output: {path: _ _ dirname+ "/ dist", filename: "bundle.js"}}

Now run in the terminal: webpack

See if it is the same as the package compilation that you typed webpack. / app.js. / dist/bundle.js before.

Entry: specifies the packaged entry file

1. A single file is packaged into a single output file, and the name of the file is written directly, for example: entry: "main.js"

two。 Multiple files are packaged into a single output file, and the file names are put into an array, for example: entry: ['main.js','xx.js']

3. Multiple files are packaged into multiple output files, and the filename is placed in a keyword pair, for example: entry: {abank _ main.jspacking _ paper _ bmistx.js'}

Output: configure packaging result

Path is the definition of the output folder, and filename is the name of the package result file. If you specify the package entry file as one or two cases above, the filename will directly follow the file name you want to output. For the third case, filename should be written as [name]. The file name is .js. The [name] in filename is the key in entry.

Automatic packaging for monitoring changes

When we are constantly making changes to the code, in order not to modify it once and then manually package it again. You can use the watch feature of webpack.

Webpack-watch or webpack-w

Or you can set watch to true directly in the configuration code.

Module.exports = {entry: "app.js", output: {path: _ _ dirname+ "/ dist", filename: "bundle.js"}, watch: true}

4. Use Babel

What is Babel? Babel is a JavaScript compiler. Use it to convert the syntax of ES6 to that of ES5 so that it can be executed in existing environments.

Execute on the terminal: npm install webpack babel-loader babel-core babel-preset-es2015-- save-dev

After the installation is completed, you need to modify the previous webpack.config.js to:

Module.exports = {entry: ". / app.js", output: {path: _ _ dirname+ "/ dist", filename: "bundle.js"}, module: {loaders: [{test: /\ .jsx? $/, loader: 'babel-loader', exclude: / node_modules/, query: {presets: [' es2015']}]}, resolve: {extensions: ['' '.clients', '.js']}}

You can now code in the ES6 syntax in the file. Let's test it and add it to app.js:

Var func = str = > {console.log (str);}; func ('I'm using Babel now')

ES6 supports defining functions with arrows, if you can see "I'm using Babel now!" on the console. The printed text indicates that our Babel module has been installed successfully, and we can start coding using ES6.

The loaders entry represents the loader used to load this type of resource.

Test, which is a regular segment, indicates the type of resource to match.

Exclude specifies files that should be ignored, and we specify / node_modules/ here.

Query can be written in two ways, one is to follow the loader name directly as a string:

Loader: 'babel-loader?presets [] = es2015

The other is shown in this article:

Query: {presets: ['es2015']}

Resolve.extensions is used to indicate which suffixes are identified by the program's automatic completion.

Notice that the first extensions is an empty string! Corresponding to situations where no suffix is needed.

5. Combined with React

We have configured and introduced Webpack and Babel earlier, the basic environment has been set up, and now we are starting to use React.

The terminal enters the following code to install react and react-dom

Npm install react react-dom-save

Babel for all preset plug-ins for React

Npm install babel-preset-react-save-dev

Since we have added the default plug-in for react, we need to modify the webpack.config.js.

Modify the query under module-> loaders as follows:

Query: {presets: ['es2015','react']}

Now create a file called hello.js

Import React from "react"; class Hello extends React.Component {render () {return (Hello, World!)}} export default Hello

Then modify the file in app.js as follows:

Import React from "react"; import ReactDOM from "react-dom"; import Hello from ". / hello"; / / var func = str = > {/ / console.log (str); / /}; / func ('I'm using Babel now'); / / document.querySelector ('# app') [xss_clean] = 'Hello Worldworkers' leading role ReactDOM.render (, document.querySelector ('# app'))

If you can see "Hello, React!" in the browser, it means that we have set up the environment of Webpack+Babel+React, and then we can develop on this basis.

After reading this, the article "how to build a Webpack+Babel+React development environment" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.