Home > Developer > JavaScript
Describes how to build the Webpack + Babel + React development environment and webpackbabel
1. Understand Webpack
Before building an application, let's take a look at Webpack. Webpack is a module packaging tool that can pack various files (such as ReactJS, Babel, Coffeescript, and Less/Sass) as a module for compilation and packaging.
2. Install Webpack
Before using Webpack for development in a project, we must first install it in the global environment.
npm install webpack -g
3. Create a project
After installation, create a project named learn-webpack and enter the project folder. Of course, you can name the project name you want.
mkdir learn-webpack && cd learn-webpack
Find the project folder you just created in the editor
Now let's create two files:
App. js
document.querySelector('#app').innerHTML = 'Hello World!';
Index.html
<!DOCTYPE html>Then run
Webpack./app. js./dist/bundle. js
Finally, start the local http service.
Python-m SimpleHTTPServer
In this case, you can enter http: // localhost: 8000 in the browser.
If you can see Hello world in your browser! It means that you have successfully used Webpack to package main. js and compile it into bundle. js. Isn't it easy?
Define a configuration file
The above is just a brief introduction to the use of Webpack. In fact, each project should contain a webpack. config. js to tell Webpack what to do.
module.exports = { entry: "app.js", output: { path: __dirname+"/dist", filename: "bundle.js" }}Run webpack on the terminal.
Check whether it is the same as the packaging and compilation results of webpack./app. js./dist/bundle. js.
Entry: Specifies the packaged entry file.
1. Package A single file into a single output file and directly write the file name, for example, entry: "main. js"
2. Package Multiple files into a single output file and put the file name into an array, for example, entry: ['main. js', 'xx. js']
3. Package Multiple files into multiple output files and put the file names in one key-word pair, for example, entry: {a: 'main. js', B: 'xx. js '}
Output: configure the packaging result
Path is the definition output folder, and filename is the name of the packaging result file. If you specify the packaging entry file as the first and second types, the filename file is directly the file name you want to output. If there are 3rd cases, the filename should be written as [name]. File name. js. The [name] In filename is the key in the entry.
Automatic packaging of listener changes
When we constantly change the code, we manually package the code once instead of modifying it. You can use the watch function of webpack.
Webpack -- watch or webpack-w
Alternatively, you can directly set watch to true 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. It can be used to convert ES6 syntax to ES5 syntax for execution in the current environment.
Run: npm install webpack babel-loader babel-core babel-preset-es2015 -- save-dev on the terminal
After the installation is complete, modify the previous webpack. config. js:
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: ['','.coffee','.js'] }}Now we can write the code in the file in ES6 syntax. Let's test it and add it in app. js:
Var func = str => {console. log (str) ;}; func ('I am using Babel now! ');ES6 supports defining functions using arrows. If you can see "I am using Babel now!" on the console !" The printed text indicates that the Babel module has been successfully installed. You can use ES6 to write the code.
The loaders entry indicates the loader used to load resources of this type.
Test is a regular expression that indicates the type of the matched resource.
Exclude is the object to be ignored. We have specified/node_modules/here /.
Query can be written in either of the following ways:
loader: 'babel-loader?presets[]=es2015The other is shown in this article:
query: { presets: ['es2015']}Resolve. extensions is used to specify which suffixes the program automatically completes to identify,
Note that the first extensions is an empty string! No suffix is required.
5. Combined with React
We have already configured and introduced Webpack and Babel. The basic environment has been set up. Now we are using React.
Enter the following code to install react and react-dom.
npm install react react-dom --saveBabel all default plug-ins for React
npm install babel-preset-react --save-devBecause we have added the default react plug-in, we need to modify webpack. config. js.
Modify the query under module-> loaders as follows:
query: { presets: ['es2015','react']}Create a file named hello. js
import React from "react";class Hello extends React.Component{ render() { return ( <div> Hello, World! </div> ) }}export default Hello;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 am using Babel now! '); // Document. querySelector (' # app'). innerHTML = 'Hello World! '; ReactDOM. render (<Hello/>, document. querySelector (' # app '));If you can see "Hello, React!" in your browser! ", It means that we have set up the Webpack + Babel + React environment, and then we can develop it on this basis.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
