The preface

Create-react-app creates a React project directly. Create-react-app creates a React project directly with create-react-app. Create-react-app creates a React project directly with create-react-app. Hats off to the community developers for their efforts. In this article, I learned webpack by myself. I will create a React project using create-React-app directly. I also want to create a Webpack + React project by myself, a minimalist version of react project. Personal learning documents are for reference only. If there are not only welcome to comment on the comments section exchange

Address of the file

Making the address

Why link?

Because of the active WebPack community, the various dependencies required by the WebPack + React build iterate very quickly. Or now the author can run on the computer, but you read this article according to the operation of the text will appear some problems. If downloading files on GitHub doesn’t work, skip this article.

Initialize the

Use Node version V16.14.1

Create a study-Webpack folder. Open the terminal in study-webpack and execute the following command

npm init -y
Copy the code

Study-webpack automatically creates a package.json file;

Install webpack

Install the webPack dependency on react. The terminal execution

npm i webpack webpack-cli -D
Copy the code

Create some new files

  • The Config folder holds the WebPack configuration file
    • Webpack.common.js, for the WebPack common configuration
    • Webpack.prod. js for webPack configuration
    • Webpack.dev.js, for webPack development environment configuration
  • The SRC folder stores js and react files
    • index.js

The details are shown in the figure

Initial WebPack configuration

Configure webpack.com mon. Js

const path = require("path")
module.exports = {
  entry: {
    index: path.join(__dirname, ".. /src/index.js"),},output: {
    filename: "[name].[hash:4].js".path: path.join(__dirname, ".. /dist"),}}Copy the code

After the configuration webpack. Prod. Js

const { merge } = require("webpack-merge")
const common = require("./webpack.common.js")

module.exports = merge(common, {
  mode: "production",})Copy the code

Because we use webpack-merge in webpack.prod.js, we need to install the webpack-Merge dependency package.

Webpack-merge: Used to merge two Webpack configurations To learn more about webpack-merge click on me

Install webpack – merge

npm i webpack-merge -D
Copy the code

Simple, very simple;

  • Entry Core entrance,
  • Output core export; These are the entrance and exit of Webpack; You can use the path module in Node
  • Mode Defines the mode of the Webpack, which can be Production Development

Webpack is used for packaging

Install a dependency cross-env before using it

Cross-env: a script that sets up and uses environment variables across platforms; For details, jump to cross-env

Installation of cross – env

npm i cross-env -D
Copy the code

Perform webpack. Prod. Js

Go to package.json and add build to scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
Copy the code

Set the environment variable to production to use webpack and let webPack run with the webpack.prod.js configuration in the config folder.

Execute WebPack for the first time

Execute at the root terminal

npm run build
Copy the code

When you see the image below, WebPack has already run and packed the js from SRC /index.js into the dist folder

Packaging is already available, how do you use it in a development environment? How do I see the page?

Webpack is used for development

Dependency packages required

  • Webpack-dev-server is used to start the Webpack service
  • Html-webpack-plugin is used to package JavaScript files together for use in a browser
npm i html-webpack-plugin webpack-dev-server -D
Copy the code

Modify webpack.com mon. Js

  • Introducing the HTML – webpack – the plugin
  • The file address and file name required to configure html-webpack-plugin are as follows:
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  entry: {
    // doing
  },
  output: {
    // doing
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, ".. /tempate.html"),
      filename: "index.html",})],}Copy the code

Because tempate. HTML is used in the webpack.common.js file, you need to create a new tempate. HTML file in the root directory. The content of the document is as follows:

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

The current directory structure of the entire project is as follows:

Modify the webpack. Dev. Js

  • Introduces the Webpack common configuration, webpack.common.js
  • Define environment mode as development
  • Define the address and port where devServer starts the Webpack service

The specific code is as follows

const { merge } = require("webpack-merge")
const common = require("./webpack.common.js")
module.exports = merge(common, {
  mode: "development".devServer: {
    host: "localhost".port: "8888",}})Copy the code

Modify scripts in package.json and add the start command

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"."start": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js"
  },
Copy the code

Set the environment variable to use webpack-dev-server for development and let webpack-dev-server run as webpack.dev.js in the config folder of the configuration file.

Modify the SRC/index. Js

console.log("webpack")
const root = document.getElementById("root")
root.textContent = "webpack2"
Copy the code

Start the

Root terminal execution

npm start

Copy the code

If you see the image below, your Webpack has started successfully

conclusion

The first phase is complete, and through a series of actions you are ready to build a simple server using WebPack. Changes to JS are already available in Webpack in real time. That’s the end of this phase. Thank you readers. The author’s level is limited, if the process description is inadequate, welcome to comment on the discussion section