使用WebPack搭建React开发环境

第一步、基础环境

初始化

项目初始化

npm init -y

安装 webpack

npm i webpack

安装 react

npm i react react-dom -s

项目基础框架

入口文件 (src/index.js)

import React from 'react'
import {render} from 'react-dom'
import App from './App'
render(<App/>,document.getElementById('root'))

主组件 (src/App.js)

import React,{Component} from 'react'
class App extends Component{constructor(){super()
    }
    redner(){
        return(
            <div>
                App Module
            </div>
        )
    }
}    

webpack.config.js

const path = require('path')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const STYLELINTENABLE = true
module.exports = {
    mode:'development',
    entry:'./src/index.js',
    output:{path:path.resolve(__dirname,'build'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            // 处理 js/jsx
            {
                test:/\.jsx?/i,
                use:{
                    loader:'bebel-loader',
                    options:{presets:['@babel/preset-react']
                    }
                }
            },
            // 处理 css
            {
                test:/\.css$/i,
                use:['style-loader','css-loader',{
                    loader:'postcss-loader',
                    options:{plugins:require('autoprefixer')
                    }
                }]
            },
            // 处理图片资源
            {test:/\.(png|jpg|gif)$/i,
                use:{
                    loader:'url-loader',
                    options:{
                        outputPath:'imgs/',
                        limit:10*1024
                    }
                }
            },
            // 处理字体文件
            {test:/\.(eot|svg|ttf|woof|woof2)$/i,
                use:{
                    loader:'url-loader',
                    options:{
                        outputPath:'fonts/',
                        limit:10*1024
                    }
                }
            },
            //less
            {
                test:/\.less$/i,
                use:['style-loader','css-loader','less-loader']
            },

        ]
    },
    devtool:'source-map',
    plugins:[
        ...STYLELINTENABLE ?[
            new StyleLintPlugin({files:['**/*.css','**/*.less','**/*.js','**/*.html','**/*.vue','**/*.scss']
            })
        ]:[]]
}

webpack.config.js

  "stylelint": {"extends": "stylelint-config-standard"},
  "browserslist":[
    "> 0.5%",// 市场占有率大于百分之零点 5
    "last 2 version",// 最后两个版本
    "not dead"// 还没有 die
  ]