详解使用WebPack搭建React开发环境

第一步、基础环境初始化项目初始化npminit-y安装webpacknpmiwebpack安装reactnpmireactreact-dom-s项目

第一步、基础环境

初始化

项目初始化

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
 ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

WebPack搭建React开发环境 WebPack React开发环境