webpack 配置 react

新建一个文件夹，文件夹名最好是小写字母或+下划线组成；

文件夹内执行初始化命令

> npm init

然后安装所需插件

> npm install webpack webpack-cli webpack-dev-server
> npm install html-webpack-plugin
> npm install mini-css-extract-plugin
> npm install css-loader style-loader
> npm install react react-dom
> npm install babel-loader @babel/core @babel/preset-env @babel/preset-react

增加run dev命令和runbuild命令，package.json文件如下

{
    "name": "task_manager",
    "version": "1.0.0",
    "private": "true",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack serve --config build/webpack.dev.config.js --mode development",
        "build":"webpack build --config build/webpack.prod.config.js --mode production"
    },
    "license": "ISC",
    "dependencies": {
        "@babel/core": "^7.18.0",
        "@babel/preset-env": "^7.18.0",
        "@babel/preset-react": "^7.17.12",
        "babel-loader": "^8.2.5",
        "css-loader": "^6.7.1",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.6.0",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "style-loader": "^3.3.1",
        "webpack": "^5.72.1",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.9.0"
    }
}

项目根目录下创建build文件夹，新建开发环境webpack.dev.config.js和生产环境webpack.prod.config.js

dev 和 prod文件配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const dirname = __dirname.replace('build','')
module.exports = {
    entry: dirname+'/src/index.js',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(dirname,'task_manager'),
        clean:true
    },
    resolve:{
        alias: {
            '@': path.join(dirname,'src')
        },
    },
    module:{
        rules:[
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader","less-loader"],
            },
            {
                test: /\.jsx?$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), 
                                {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                },
                
            },
        ],
    },
    devtool: 'inline-source-map',
    plugins:[
        new HtmlWebpackPlugin({
            template:dirname+'/public/index.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin()
    ],
    devServer: {
        port: "8080",
        host: "localhost",
        proxy: {
            "/api": {
                target: 'https://www.6pian.cn',
                changeOrigin: true,
                secure: true, // 如果是https接口，需要配置这个参数
                pathRewrite:{
                    '^/api':''
                },
                headers: {
                    'kan-token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodW9kZSIsInN1YiI6IjE1MTkyMDAyODI3IiwiYXVkIjoiMzQwODI1IiwiaWF0IjoxNjQxODA3MjgzLCJzaWduIjoiYWNiNGZjOWNjMDM4NmJiMzBkNDEzNGE1Zjc3MmFiNzYiLCJleHAiOjE2NzMzNDMyODN9.JCxac0kWmr-31XkSoan8jxGh6pZKXH2wyXULNZuEkfg'
                }
            }
          },
    },
    
};


----------------------webpack.prod.config.js--------------------------


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const dirname = __dirname.replace('build','')
module.exports = {
    entry: dirname+'/src/index.js',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(dirname,'task_manager'),
        clean:true
    },
    resolve:{
        alias: {
            '@': path.join(dirname,'src')
        },
    },
    module:{
        rules:[
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader","less-loader"],
            },
            {
                test: /\.jsx?$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), 
                                {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                },
                
            },
        ],
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:dirname+'/public/index.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin()
    ]
};

根目录下创建public文件夹，新建一个index.html文件，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

新建文件夹src，下创建index.js入口文件，内容如下

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<div>hello react</div>,document.getElementById('root'));

最后执行命令npm run dev运行项目，npm run build打包项目。