使用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:{ //通过webpack打包输出的最终目录及文件
        path:path.resolve(__dirname,'build'),
        filename:'bundle.js'
    },
    module:{ //对各种资源进行loader的配置处理
        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
  ]
  

配置自动补充css样式前缀，并设置浏览器相应的配置

关于Loader