Tutorial on setting up Webpack, Babel, and React development environments-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Tutorial on setting up Webpack, Babel, and React development environments

小云云

Jan 11, 2018 am 09:27 AM

babelreactwebpack

This article mainly introduces the steps to build the Webpack+Babel+React development environment in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Get to know Webpack

Before building an application, let’s first understand Webpack. Webpack is a module packaging tool that can package various files (such as ReactJS, Babel , Coffeescript, Less/Sass, etc.) are compiled and packaged as modules.

2. Install Webpack

To start using Webpack for development in the project, we first need to 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 file folder, of course you can name the project whatever you want.

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(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

Then execute in the terminal

webpack ./app.js ./dist/bundle.js

Finally execute to start the local http service

python -m SimpleHTTPServer

At this time you can enter in the browser: http://localhost:8000

If you can see it in the browser Hello world! That means you have successfully used Webpack to package and compile main.js into bundle.js. Isn’t it very simple?

Define a configuration file

The above is just a brief introduction to the use of Webpack. In fact, every project should contain a webpack.config. js, used to tell Webpack what needs to be done.

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 before entering webpack ./app.js ./dist/bundle.js The packaging and compilation results are the same.

entry: Specify the packaged entry file

1. Package a single file into a single output file and directly write the name of the file, for example: entry: "main.js "

2. Pack multiple files into a single output file and put the file names into an array, for example: entry:['main.js','xx.js']

3 .Package multiple files into multiple output files, put the file names into a key pair, for example: entry: {a:'main.js',b:'xx.js'}

output: Configure packaging results

path is the defined output folder, filename is the name of the packaging result file, if the designated packaging entry file is the above 1 or 2 situations, filename is directly as you want The output file name. If it is the third case, filename needs to be written as [name].filename.js, and [name] in filename is the key in entry.

Monitoring changes and automatic packaging

When we are constantly changing the code, in order not to modify it once, we package it manually again. You can use webpack's watch function.

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. Using Babel

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

Execute in 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: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

Now you can write code in the file using ES6 syntax. Let’s test it and add:

## to app.js
#

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);

ES6 supports the use of arrows to define functions. If you can see the printed text "I am now using Babel!" on the console, it means that our Babel module is successfully installed and you can start using ES6. The code is written.

The loaders item indicates the loader used to load this type of resource.

test is a regular expression indicating the resource type to be matched.

exclude specifies files that should be ignored. We specify /node_modules/ here.

There are two ways to write query. One is to directly follow the loader name in string form:

loader: &#39;babel-loader?presets[]=es2015

The other is as shown in this article:

query: {
 presets: [&#39;es2015&#39;]
}

resolve.extensions is used to indicate which suffixes the program automatically completes and recognizes.

Note that the first extensions is an empty string ! Corresponds to the situation where the suffix is not required.

5. Combined with React

We have already configured Webpack and Babel and made some introductions. The basic environment has been It's set up, now we start using React.

Enter the following code in the terminal to install react and react-dom

npm install react react-dom --save

Babel针对React的所有的预设插件

npm install babel-preset-react --save-dev

由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下：

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

现在创建一个名为hello.js的文件

import React from "react";

class Hello extends React.Component{
 render() {
  return (
   <p>
     Hello, World!
   </p>
  )
 }
}

export default Hello;

然后将app.js里面的文件修改如下：

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

相关推荐：

React Native 搭建开发环境详解

如何使用Docker部署PHP开发环境

详解php多人开发环境原理

The above is the detailed content of Tutorial on setting up Webpack, Babel, and React development environments. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

VUE3入门教程：使用Webpack进行打包和构建Jun 15, 2023 pm 06:17 PM

Vue是一款优秀的JavaScript框架，它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本，它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一，它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

vite和webpack的区别是什么Jan 11, 2023 pm 02:55 PM

区别：1、webpack服务器启动速度比vite慢；由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。2、vite热更新比webpack快；vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖，而webpack基于node。4、vite的生态不及webpack，加载器、插件不够丰富。

如何使用PHP和webpack进行模块化开发May 11, 2023 pm 03:52 PM

随着Web开发技术的不断发展，前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言，在进行模块化开发时，我们需要借助一些工具来实现模块的管理和打包，其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块，每个模块都有自己的作

react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。

webpack怎么将es6转成es5的模块Oct 18, 2022 pm 03:48 PM

配置方法：1、用导入的方法把ES6代码放到打包的js代码文件中；2、利用npm工具安装babel-loader工具，语法“npm install -D babel-loader @babel/core @babel/preset-env”；3、创建babel工具的配置文件“.babelrc”并设定转码规则；4、在webpack.config.js文件中配置打包规则即可。

Webpack是什么？详解它是如何工作的？Oct 13, 2022 pm 07:36 PM

Webpack是一款模块打包工具。它为不同的依赖创建模块，将其整体打包成可管理的输出文件。这一点对于单页面应用（如今Web应用的事实标准）来说特别有用。

vue webpack可打包哪些文件Dec 20, 2022 pm 07:44 PM

在vue中，webpack可以将js、css、图片、json等文件打包为合适的格式，以供浏览器使用；在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包，并且在打包的过程中，可以对资源进行处理，如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

使用Spring Boot和Webpack构建前端工程和插件系统Jun 22, 2023 am 09:13 AM

随着现代Web应用程序的复杂性不断增加，构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行，它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架，它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能，比如自动配置，使开发人员可以更快、更容易地搭建和部署Web应用程序。W

See all articles