Knowledge about Webpack, Babel and React

Before starting

Before writing the article, I assume that everyone already has JavaScript, Node package management tool, Linux terminal operation These basic skills, next, I will guide you step by step to build a React project from scratch

The final effect

We will use Webpack To build a React application with Babel, our purpose is very clear, which is to better understand and master the use of these tools

We create The application should not only be minimum, but also follow best practices to consolidate the foundation for students who are not particularly skilled

Initialization

Create your project and add your configuration file package.json

mkdir webpack-babel-react-revisited
cd webpack-babel-react-revisited

yarn init

Webpack

We first install Webpack, it is currently very The popular module packager, which packages each module included in the application into a small number of chunks so that these codes are loaded from the server into the browser

yarn add webpack --dev

Next, we start writing some modules. We save the source file app.js to the src directory

/** app.js */

console.log('Hello from 枫上雾棋!');

Then, we run Webpack

./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js

If you open the generated app.bundle.js, you will find that the above is the module processing code of webpack, and the following is the console.log## we wrote

#This instruction is to use our

app.js as the entry file of Webpack, and output the result to the dist file folder, the instructions are a bit lengthy. In actual development, we use the webpack configuration file instead. In order to make the document structure look clearer, refer to the Directory as follows

├── config
│   ├── paths.js
│   ├── webpack.config.prod.js
├── src
│   ├── app.js
├── package.json

The following is a reference

Configuration

paths.js

const path = require('path');
const fs = require('fs');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
  appDist: resolveApp('dist'),
  appSrc: resolveApp('src'),
};

This file is not necessary, but as the project grows, its significance becomes instantaneous Out

webpack.config.prod.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const paths = require('./paths');

const plugins = [
  new HtmlWebpackPlugin({
    title: 'webpack babel react revisited',
    filename: path.join(paths.appDist, 'index.html'),
  }),
];

const config = {
  entry: {
    app: path.join(paths.appSrc, 'app'),
  },
  output: {
    path: paths.appDist,
    filename: 'assets/js/[name].js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins,
};

module.exports = config;

Here we also added a html-webpack-plugin, which simplifies our

HTML We won’t go into details about the creation and installation of files here. If you don’t know yet, you can click on the link to view

Among them, we also use a

syntax sugar, so that when we import .js, .jsx, there is no need to specify the extension

Next, we specify the configuration file and run it again

Webpack

./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js

found that in addition to achieving the above effect, it also automatically generated an

index.html for us. We can click on this html to view the effect in the console. Compared with Isn’t the above a lot more convenient?

Of course, in the end we definitely don’t use this method to

build. Open package.json and add the following script Command , and then execute yarn build, do you feel nice instantly?

"scripts": {
  "clean": "rimraf dist *.log .DS_Store",
  "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress"
}

Webpack dev server

In addition,

Webpack provides us with a dev server, which also supports module hot replacement

First, install

webpack-dev- server

yarn add --dev webpack-dev-server

Add the configuration file

webpack.config.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const paths = require('./paths');

const hostname = process.env.HOST || 'localhost';
const port = process.env.PORT || 3000;

const plugins = [
  new HtmlWebpackPlugin({
    title: 'webpack babel react revisited',
    filename: path.join(paths.appDist, 'index.html'),
  }),
  new OpenBrowserPlugin({ url: `http://${hostname}:${port}` }),
];

const config = {
  entry: {
    app: path.join(paths.appSrc, 'app'),
  },
  output: {
    path: paths.appDist,
    filename: 'assets/js/[name].js',
  },
    resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins,
  devServer: {
    contentBase: paths.appDist,
    compress: true,
    port,
  },
};

module.exports = config;

in the config

directory. On the basis of config.prod.js

, we added the open-browser-webpack-plugin plug-in and the devServer configuration. The open-browser-webpack-plugin plug-in, as the name suggests, will Help us automatically open the dev server and finally return the address to usUpdate

package.json

<pre class='brush:php;toolbar:false;'>&quot;scripts&quot;: { &quot;clean&quot;: &quot;rimraf dist *.log .DS_Store&quot;, &quot;webpack:dev&quot;: &quot;NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress&quot;, &quot;webpack:prod&quot;: &quot;NODE_ENV=production webpack --config config/webpack.config.prod.js --progress&quot;, &quot;start&quot;: &quot;yarn run clean &amp;&amp; yarn run webpack:dev&quot;, &quot;build&quot;: &quot;yarn run clean &amp;&amp; yarn run webpack:prod&quot; }</pre>Now, we can do it in the following way Starting

yarn start

After starting, is there a moment when you feel great

Babel

In order to be able to use

ES6

and higher, we need a Conversion compiler, we choose Babel, which can convert ES6 into code that can run in the browser. In addition, it also has built-in React JSX extension, it can be said that its emergence has promoted the development of JavaSciptAll, we install the following dependency packages

yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react

Create

Babel

Default configuration file.babelrc<pre class='brush:php;toolbar:false;'>{ &quot;presets&quot;: [&quot;env&quot;, &quot;react&quot;] }</pre>This tells

Babel

to use the two presets## we just installed #Next, update the webpack

configuration file

config.module = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
  ],
}

After the update, although we can’t see any changes, in fact we can use ES6

React

Finally, let’s add

React

, which may also be the reason why you are reading this article

First, let’s install it first

yarn add react react-dom

Replace

console.log

import React, { Component } from 'react';
import { render } from 'react-dom';

export default class Hello extends Component {
  render() {
    return <h1 id="Hello-nbsp-from-nbsp-枫上雾棋">Hello from 枫上雾棋!</h1>;
  }
}

render(<Hello />, document.getElementById(&#39;app&#39;));

with the following code because we need to add

, so we need Modify the configuration of

html-webpack-plugin

new HtmlWebpackPlugin({
  template: path.join(paths.appSrc, 'index.html'),
}),

Referencetemplate

as follows

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>webpack babel react revisited</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <p id="app"></p>
  </body>
</html>

The next step is to witness the miracle

重新启动服务，你有没有发现搭建一个 React 应用程序就这么简单

接下来，大家就可以 自行探索，添加更多的东西来适应自身应用程序的需要

下面再补充一下如何添加 CSS 和 图片

CSS

每个 web 应用程序都离不开 CSS，我们在 src 目录中创建 style.css

body,
html,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
}

#app {
  padding: 30px;
  font-family: '微软雅黑';
}

将其添加到应用程序中我们需要使用 css-loader

如果想将 css 注入 style 标签中，我们还需要 style-loader，通常，是将这两个结合使用

我们使用 extract-text-webpack-plugin 将其解压到外部

为此，我们首先安装

yarn add --dev css-loader style-loader extract-text-webpack-plugin

然后在 app.js 中导入 style.css

import './style.css';

最后更新 webpack 配置文件

config.module = {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader',
      }),
    },
  ],
}

config.plugins.push([
  new ExtractTextPlugin("styles.css"),
])

看起来稍显复杂，但是大功告成，为了更好地使用它，我们都得经历这个过程

重新启动服务，你会发现你的 dist 目录中多了一个 styles.css

图片

最后我们增加 file-loader 来处理我们引入的图片等文件

首先，安装 file-loader

yarn add --dev file-loader

我们在 src/images 中放入一张图片，在 app.js 中导入

import avatar from './images/avatar.jpg';

export default class Hello extends Component {
  render() {
    return (
      <p>
        <img class="avatar-32  lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/023/547/3a28cc6281c51a1fa6631483b6fedef4-2.png?x-oss-process=image/resize,p_40"  src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
      </p>
    );
  }
}

更新 webpack 配置文件

config.module = {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/images/',
          },
        },
      ],
    },
  ],
}

重启服务，哈哈

总结

如果有什么问题，可以查看 webpack-babel-react-revisited 仓库

现在，大家对搭建 React 应用程序是不是感觉轻松了很多，但 React 整个技术栈并不止包括这些，还有 Redux，React Router，单元测试，代码校验 等内容，关于 React 其他内容，欢迎查看日志其他文章

The above is the detailed content of Knowledge about Webpack, Babel and React. For more information, please follow other related articles on the PHP Chinese website!