详解使用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 ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)