详解使用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 ]