Home > Developer > Web Develop
Before building an application let's look at Webpack, Webpack is a modular packaging tool that can be packaged with various files (e.g. Reactjs, Babel, Coffeescript, Less/sass, etc.) as modules.
2. Installing WebpackTo get started with Webpack in a project, we first need to install it in a global environment.
NPM Install Webpack-g
3. Create a projectAfter the installation, create a project named learn-webpack and enter the project folder, of course, the project name you can play your own desired name.
mkdir learn-webpack && CD Learn-webpack
Find the project folder you just created through the editor
Now let's create 2 files:
App.js
Document. queryselector (' Hello world! '; Index.html
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset= "UTF-8" > <title>learn-webpack </title></ head><body> <div id= " App "></div> < script src= "dist/bundle.js" ></script></< Span class= "Hljs-name" >body></HTML>
Then the terminal executes
Webpack./app.js./dist/bundle.js
Finally, start the local HTTP service
Python-m Simplehttpserver
At this point you can type in the browser:
http://localhost:8000
If you can see the Hello world! in the browser, it means that you have successfully used Webpack to pack main.js and compile to bundle.js. Is it easy?
Define a configuration fileThe above is simply a brief introduction to the use of webpack, in fact each project should contain a webpack.config.js to tell webpack what needs to be done.
Module.exports = { "app.js", output: { path: __dirname+"/dist", "Bundle.js" }} Now run in the terminal:
Webpack
See if it's the same as the package compilation you entered Webpack./app.js./dist/bundle.js.
Entry: Specify a packaged entry filePath defines the output folder, filename is the name of the packaged result file, and if you specify a package entry file for the above 1 or 2 cases, filename is directly in the file name you want to output. In the case of the 3rd, the filename must be written in [name]. The file name. js,filename [name] is the key in entry.
Monitoring Change Automatic packagingWhen we are constantly making changes to the code, in order not to modify it once and then manually to the package once. You can use the Webpack watch function.
Webpack–watch or Webpack-w
Or you can set watch to true directly inside the Config code
Module.exports = { "App.js", output: { path: __dirname+"/dist","Bundle.js"}, true} What is Babel? Babel is a JavaScript compiler. It can be used to convert the syntax of ES6 to ES5 syntax for execution in the current environment.
In terminal execution:
NPM Install Webpack babel-loader babel-core Babel-preset-es2015–save-dev
After performing the installation, you need to modify the previous webpack.config.js to:
Module.exports = { "./app.js", output: { path: __dirname+"/dist", "Bundle.js" }, module: { loaders: [ { test:/\.jsx?$/, ' Babel-loader ', exclude:/node_modules/, query: { presets: [' es2015 '} } ] }, resolve: { extensions: [' ','. Coffee ','. js '}} Now you can write code in the file with ES6 syntax, let's test it and join in App.js:
str = { console.log (v);}; Func (' I'm using babel! now '); ES6 supports the use of arrows to define functions, if you can see "I'm using babel!" in the console Printed text stating that our Babel module has been successfully installed and can begin coding with ES6.
The use of loader,loader that is used to load this type of resource in the loaders item can refer to using loaders, and more loader can refer to List of loaders.
Test, which is a regular that represents the type of resource to match.
Exclude to specify the file that should be ignored, we specify the/node_modules/here.
Query has 2 ways of writing, see Query-parameters, one that follows the loader name directly as a string:
Loader: ' babel-loader?presets[]=es2015
The other one is as shown in this article:
Query: { presets: [' es2015 ']} Resolve.extensions is used to indicate which suffixes the program auto-complete recognizes,
Note that the first extensions is an empty string! Corresponds to a situation where no suffix is required.
5. Combining reactWe have already configured the Webpack and Babel and made some introductions, the basic environment has been set up, and now we are starting to use react.
Terminal Enter the following code to install react and react-dom
NPM Install react React-dom–save
Babel all preset plugins for react
NPM Install Babel-preset-react–save-dev
Since we have added react preset plugins, we need to modify the webpack.config.js.
Modify the following query for module-a loaders as follows:
Query: { presets: [' es2015 ',' react ']} Now create a file named Hello.js
"React"; React. Hello;
Then change the file inside the 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 now using babel! '); /document.queryselector ( ' #app '). InnerHTML = ' Hello world! '; Reactdom.render (document.queryselector ( ' # App ') If you can see "Hello, react!" in the browser, it means that we have set up the webpack+babel+react environment, and then we can develop it on this basis.
Detailed construction of WEBPACK+BABEL+REACT development environment
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
