instructions

This time, I learned the knowledge related to Webpack following the courses of Tencent class and made a simple small demo by using react+ Webpack

Project initialization

  • Initialize the project
npm init -y
Copy the code
  • Install act-related packages
npm install react react-dom
Copy the code
  • Install webpack
npm install webpack webpack-cli -d
Copy the code

The package.json file shows the dependencies associated with the installation

{
  "name": "Webpack_Demo"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {// Install dependencies
    "react": "^ 17.0.1"."react-dom": "^ 17.0.1"."webpack": "^ 5.11.1"."webpack-cli": "^ 4.3.1." "}}Copy the code
  • Dependencies on webPack installed globally (with the goal of being available everywhere)
npm install webpack webpack-cli -g
Copy the code
  • Install babel-Loader conversion ES6
npm install babel-loader
Copy the code
  • Install rules for transformation JSX
npm install @babel-preset-env @babel/preset-react
Copy the code
  • Install HTML-dependent transformations
npm install html-webpack-plugin
Copy the code

Project start

/ / app. Js file


Copy the code