配置React项目的webpack

src文件夹

index.html

webpack基础配置
安装webpack-dev-server、html-webpack-plugin、react、react-dom（react相关的包不加-D）、babel-loader、@babel/core(注意版本兼容问题)

package.json

配置webpack.config.js，安装@babel/preset-react和@babel/preset-env

const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
     
    mode:'development',
    entry:'./src/index.js',
    module:{
     
        rules:[
            {
     
                test:/\.(js|jsx)$/,
                use:[
                    {
     
                        loader:'babel-loader',
                        options:{
     
                            presets:[
                                '@babel/preset-react',
                                '@babel/preset-env'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
     
            template:'./src/index.html'
        })
    ]
}

配置index.js后执行yarn dev结果如下：


配置index.jsx

在index.js中导入index.jsx,替换内容


最后添加样式
安装style-loader、css-loader、less-loader后配置webapck.config.js

完整webpack.config.js如下：

const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
     
    mode:'development',
    entry:'./src/index.js',
    module:{
     
        rules:[
            {
     
                test:/\.(js|jsx)$/,
                use:[
                    {
     
                        loader:'babel-loader',
                        options:{
     
                            presets:[
                                '@babel/preset-react',
                                '@babel/preset-env'
                            ]
                        }
                    }
                ]
            },
            {
     
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
     
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
     
            template:'./src/index.html'
        })
    ]
}

base.less

index.less

将index.less引入到index.jsx中就Over啦~