This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

In the previous

React – Building projects from scratch – Project framework building

preface

In the last article, we simply set up a project directory, but found that we could not connect the HTML file to the index.js file, use the ES Module import syntax, and compile the JSX syntax to JS. To solve these problems, we need to configure WebPack.

This article is not a professional introduction to WebPack, just a simple use

I understand Webpack

Webpack, as the name suggests, is to package the Web, which means to put together the resources needed to display the Web. There are loaders that allow WebPack to package unintelligible files, and plug-ins that optimize the project. But I won’t say much about that, this time I’m going to use WebPack to package a React project. So let’s start configuring WebPack.

Configure WebPack in your project

Try installing and packaging

First we install a global webpack and webpack-CLI package: NPM I webpack webpack-cli -g

NPM install -d webpack webpack-cli@3 NPM install -d webpack webpack-cli@3 NPM install -d webpack webpack-cli@3

/ SRC /index.js -o./dist/js –mode=development

An error has been reported

If you remove the JSX syntax and import syntax of the./ SRC /index.js file, the package will still work

The reason is simple, WebPack can’t understand JSX syntax and import syntax. We need some loaders and several translators. So how do you get into loader?

Configuration webpack. Config. Js

The configuration of WebPack in a project is usually placed in this file: webpack.config.js

module.exports = {
  module: {
    rules: [{test: /\.js$/,
        loader: 'babel-loader'.options: {
          presets: ['env'.'react']}}]}}Copy the code

Loader: ‘babel-loader’, options: {presets: [‘env’, ‘react’]}, otherwise the dependencies will not take effect.

npm install babel babel-cli babel-loader@7 babel-core babel-preset-env babel-preset-react --save-dev

Babel-loader8 corresponds to babel-Core version: 7, and the babel-Loade I’m using here is 7, so don’t worry about that

Running webPack directly from the command line, you can see that a main.js file is generated under the project dist folder:

JSX is successfully compiled, js file is successfully packaged and under the HTML file we introduce this JS file,

<body>
  <div id="root"></div>
  <script src=".. /dist/main.js"></script>
</body>
Copy the code
import React from 'react';
import ReactDOM from 'react-dom';

const App = () = > (
  <div>
    <p>hello react</p>
  </div>
);

ReactDOM.render(<App/>.document.getElementById('root'));
Copy the code

Open the file in the browser and see that our React component is displayed in the browser

Here’s another question: we imported the file dist/main.js manually. Assuming that there are more files to package, should I import them individually? So here we can use a WebPack plugin to help: html-Webpack-plugin

First install: NPM I html-webpack-plugin -d

Remove the JS we manually introduced earlier:

<body>
  <div id="root"></div>
</body>
Copy the code

Modify the webpack.config.js file

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  module: {
    rules: [{test: /\.js$/,
        loader: 'babel-loader'.options: {
          presets: ['env'.'react']}}]},plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'}})]Copy the code

/public/index.html is used as a template to import the packaged file into the HTML. After repackaging, we get this result:

A little curious here, why is it packaged inside the head tag? Inject: ‘body’

plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'.inject: 'body'})].Copy the code

conclusion

After this attempt, we successfully packaged a React component and ran it in the browser via WebPack, but obviously this was a little different from our daily development situation. Why was it opened in a static file? Localhost: 3000? What about hot updates? This is what we will continue to try in the next article.

The next article

React – Build projects from scratch -webpack-dev-server