webpack+react搭建脚手架总结

1、初始化项目

npm init

填写基本信息，生成package.json

2、安装依赖包

webpack、babel、react等，webpack、babel工具类使用npm install --save-dev 安装在"devDependencies"下。

{
  "name": "wmyyq",
  "version": "1.0.0",
  "main": "src/index.html",
  "author": "yq",
  "license": "ISC",
  "description": "666",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "dev": "",
    "start": "webpack-dev-server --config ./build/webpack.config.js",
    "build": "webpack --config ./build/webpack.config.js"
  },
  "dependencies": {
    "antd": "^4.18.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.1",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.1"
  }
}

知识点：
1.webpack-dev-server 指定目录下的js启动服务
2.webpack 进行打包
3.bable 代码转换器

3、新建项目目录

.babelrc

{
    "presets": ["react", "es2015"],
    "env": {
      "dev": {
          "plugins": [["react-transform", {
             "transforms": [{
               "transform": "react-transform-hmr",
               "imports": ["react"],
               "locals": ["module"]
             }]
          }]]
      }
    }
  }

知识点：

一定要在根目录下配置.babelrc文件，此文件用于配置转码规则和插件。cmd进入根目录，输入 type null>.babelrc 即可创建该文件。

4、配置webpack.config.js

const path = require('path');
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    entry: './src/index.jsx', //js入口文件;
    output: {
        path: path.resolve(__dirname, '../dist'), //利用path包获取绝对文件路径
        filename: 'bundle.js' //打包成功后的文件名<br>
    }, //js出口文件;路径加文件名;
    module: {
        rules: [
            {
                test: /\.(jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.html",
            inject: "body",
            filename: "index.html",
        }) //在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
    ],
    devServer: {
        static: path.resolve(__dirname, '../src'), //启动入口
        port: 9000,
        hot: true,
        proxy: {//代理服务器 api请求
            '/api': {
                target: 'http://your_api_server.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

知识点：

1、devServer配置

2、HtmlWebpackPlugin

为html文件中引入外部资源如script、link。即index.html引入bundle.js。

5、src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8">
    <title></title>

</head>
<body>
<div id="root"></div>
<!-- <script src="./bundle.js"></script> -->
</body>
</html>

6、src/index.jsx

import React from "react";
import ReactDom from "react-dom";

class Main extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (<div>hello!!</div>)
    }
}
ReactDom.render(
    <Main/>,
    document.getElementById('root')
)

7、运行 npm run start