I have been using create-react-app to create react projects. Recently, I am learning about Webpack. I want to try to build a React project using Webpack.

The four basic concepts of Webpack

  • Entry: Specifies the entry to Webpack build internal dependencies.
  • Output: Specifies where Webpack outputs the packaged bundles and the corresponding names for the files.
  • Loader: Since Webpack can only understand JS files,loaderYou can convert all types of files into modules that Webpack can handle.
  • plugins: pluginsThese are mainly plugins that help us with development, such as packaging optimization and compression.

Webpack setup process

Now that we know some of the basic concepts of Webpack, we can start configuring Webpack.

1. Initialize the project

cd 'your react-project'// Go to the react project folder NPM init -y // initialize package.jsonCopy the code

2. Install Webpack

NPM install --save-dev webpack-cli // To use webpack4 or later, you need to install the CLICopy the code

3. Create a project directory file

webpack.config.js
.babelrc
src
public



index.js
index.html

The entire project catalog is as follows:

4. Install Babel – loader

npm i babel-core babel-loader babel-preset-env --save-dev
Error: Can’t find moudle 

npm install @babel/core @babel/preset-env babel-loader --save-dev
Copy the code

Type in.babelrc

{
    "presets": [
        "@babel/preset-env"]}Copy the code

Configuration webpack. Config. Js

const path = require('path');
module.exports = {
    // Import file
    entry: [
        path.join(__dirname,'./src/index.js')].output: {
        filename: '[name].bundle.js'.path: path.join(__dirname,'./dist')},/ / a loader configuration
    module: {
        rules:[
            {
                test: /\.(js|jsx)$/.exclude: /node_modules/.use: {
                    loader: "babel-loader"}}]}}Copy the code

5. Generate HTML

npm i html-webpack-plugin html-loader --save-dev
Copy the code

Configuration webpack. Config. Js

. const HtmlWebPackPlugin =require('html-webpack-plugin');
module.exports = { ... .plugins: [
        new HtmlWebPackPlugin({
            template: "./public/index.html".filename: "./index.html"}})]Copy the code

Use the clean-webpack-plugin to clean up the dist directory before each packaging to avoid generating duplicate and unused static files.

npm install clean-webpack-plugin --save-dev
Copy the code

Configuration webpack. Config. Js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./public/index.html".filename: "./index.html"}})]Copy the code

6. Handle CSS, LESS, and static resources

npm install less --save-dev
npm install style-loader css-loader less-loader  --save-dev
Copy the code

Configuration webpack. Config. Js

module.exports = { ... ./ / a loader configuration
    module: {
        rules:[
            {
                test: /\.(js|jsx)$/.exclude: /node_modules/.use: {
                    loader: "babel-loader"}}, {test: /\.css$/.use: [
                    "style-loader"."css-loader"] {},test: /\.html$/.use: [{
                    loader: "html-loader".options: {
                        minimize: true}}}, {test: /\.less$/.use: [
                    "style-loader"."css-loader"."less-loader"] {},test: /\.(png|jpg|gif|svg)$/.use: [{loader: "file-loader"}}]},... }Copy the code

7. Configure the webpack-dev-server hot update

npm install webpack-dev-server --save-dev
Copy the code

Configuration webpack. Config. Js

module.exports = {
    ...
    // devServer provides a simple Web server that can be reloaded in real time (hot updates)
    devServer: {
        port: 3000.// Port number, default 8080
        hot: true.// The hot module is updated
        compress: false.//true compresses the code
        open: false.// Automatically open the browser
        overlay: true.// An error message is displayed on the browser
        stats: "errors-only" // The shell only prints error messages},... }Copy the code

This completes our basic configuration of Webpack.congfig. Js.

Complete webpack.config.js configuration

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // Import file
    entry: [
        path.join(__dirname,'./src/index.js')].output: {
        filename: '[name].bundle.js'.path: path.join(__dirname,'./dist')},// devServer provides a simple Web server that can be reloaded in real time (hot updates)
    devServer: {
        port: 3000.// Port number, default 8080
        hot: true.// The hot module is updated
        compress: false.//true compresses the code
        open: false.// Automatically open the browser
        overlay: true.// An error message is displayed on the browser
        stats: "errors-only" // The shell only prints error messages
    },
    / / a loader configuration
    module: {
        rules:[
            {
                test: /\.(js|jsx)$/.exclude: /node_modules/.use: {
                    loader: "babel-loader"}}, {test: /\.css$/.use: [
                    "style-loader"."css-loader"] {},test: /\.html$/.use: [{
                    loader: "html-loader".options: {
                        minimize: true}}}, {test: /\.less$/.use: [
                    "style-loader"."css-loader"."less-loader"] {},test: /\.(png|jpg|gif|svg)$/.use: [{loader: "file-loader"}]}]},plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./public/index.html".filename: "./index.html"}})]Copy the code

Installing the React Module

npm install react react-dom --save
npm install @babel/preset-react --save-dev
Copy the code

Configuration. Babelrc

{
    "presets": [
        "@babel/preset-env"."@babel/preset-react"]}Copy the code

Modify script configuration of package.json

Development – Development mode

Productio – Production mode

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --mode development"."build": "webpack --mode production"
  }
Copy the code

Modify the entry file index.js

import React from 'react';
import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Webpack config! </h1>, document.getElementById('root'));Copy the code

Modify the template index.html


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
Copy the code

Start the React project

NPM start // Enabled at development timeCopy the code

Webpack also has many functions. Later, we can try to configure multi-page applications to deepen our understanding and use of Webpack.