A link to the

  • Build react Scaffolding from scratch

Configure the plug-inclean-webpack-plugin,html-webpack-pluginThese two plug-ins are basically required

introduce

  • Clean -webpack-plugin – Cleans up the directory generated from the last package each time a package is packaged

** Some content of this plug-in is out of date and has not been updated. It will be wrong to configure it according to the official website, so please refer to the github plug-in document for configuration. The document address is github.com/johnagan/cl…

  • Html-webpack-plugin – Generates index.html in the package file

The installation

yarn add clean-webpack-plugin html-webpack-plugin -D
Copy the code

These plug-ins are used in both modes, so they are configured in common.js

config/webpack.common.js

. + const HtmlWebpackPlugin = require('html-webpack-plugin');
        + const { CleanWebpackPlugin } = require('clean-webpack-plugin');

        function webpackCommonConfigCreator(options){
            ...
            return{... plugins: [ + new HtmlWebpackPlugin(), + new CleanWebpackPlugin({ + cleanOnceBeforeBuildPatterns: [path.resolve(process.cwd(),"build/"), path.resolve(process.cwd(), "dist/"] +}),]}}...Copy the code

Change the development code to insert an element on the page

src/index.js


        var ele = document.createElement('div');
        ele.innerHTML = "hello webpack";

        document.body.appendChild(ele);
Copy the code

The effect

yarn start, the effect:

yarn buildIndex.html is generated in the build directory and bundle.js is introduced

Next configure react

React

Install the react


    yarn add react react-dom
Copy the code

Install Babel

    yarn add @babel/core @babel/cli @babel/preset-env -D
    yarn add @babel/preset-react -D
    yarn add babel-loader -D
Copy the code

Configure the Babel – loader

config/webpack.common.js

.function webpackCommonConfigCreator(options){
            ...
            return{... + module: { + rules: [ + { +test: /\.(js|jsx)$/,
                +             include: path.resolve(__dirname, ".. /src"),
                +             use: [
                +                 {
                +                     loader: "babel-loader",
                +                     options: {
                +                         presets: ['@babel/preset-react'], +} +} +] +} +] +},... }}Copy the code

Prepare the basic React file

src/index.js

        import React from 'react';
        import ReactDom from 'react-dom';
        import App from './App.js';

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

src/App.js

        import React from 'react';

        function App() {return (
                <div>
                    hello react
                </div>
            )
        }

        export default App;
Copy the code

The App node is mounted in the id ofrootDiv, andhtml-webpack-pluginThe HTML generated by the plug-in does not have this div by default, so you need to configure the plug-in to use the template we defined

Create a public/index. HTML

public/index.html

<! DOCTYPE html> <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>react webpack</title>
        </head>
        <body>
            <div id="root"></div>
        </body>
        </html>
Copy the code

config/webpack.common.js

.function webpackCommonConfigCreator(options){
            ...
            return{... plugins: [ - new HtmlWebpackPlugin(), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname,".. /public/index.html") +}),... ] }}Copy the code

yarn start, compiles properly

The React module is hot replaced

In the development mode, if the code is changed, the browser will refresh the page to update the change and configure module hot replacement. Instead of refreshing, the browser will update the change through DOM operation, which is more friendly to the development mode of frequently updating the code

Install the loader

    yarn add react-hot-loader -D
Copy the code

Configure the loader

config/webpack.common.js

.function webpackCommonConfigCreator(options){
            ...
            return{... module: { rules: [ {test: /\.(js|jsx)$/,
                            include: path.resolve(__dirname, ".. /src"),
                            use: [
                                {
                                    loader: "babel-loader",
                                    options: {
                                        presets: ['@babel/preset-react'],
                                        + plugins: ["react-hot-loader/babel"],}}]},... }}Copy the code

Modify react code

src/App.js

        + import {hot} from 'react-hot-loader/root'; .export default hot(App);
Copy the code

The webpackDevServer hot loading function is enabled

config/webpack.dev.js

. const config = { devServer: { contentBase: path.join(__dirname,".. /dist"),
                + hot: true}}...Copy the code

A link to the

  • Build react Scaffolding from scratch

  • Build react Scaffolding from Scratch

Github repository:Github.com/tanf1995/We…