详解使用WebPack搭建React开发环境
第一步、基础环境
初始化
项目初始化
npminit-y
安装webpack
npmiwebpack
安装react
npmireactreact-dom-s
项目基础框架
入口文件(src/index.js)
importReactfrom'react' import{render}from'react-dom' importAppfrom'./App' render(,document.getElementById('root'))
主组件(src/App.js)
importReact,{Component}from'react' classAppextendsComponent{ constructor(){ super() } redner(){ return(AppModule) } }
webpack.config.js
constpath=require('path') constStyleLintPlugin=require('stylelint-webpack-plugin') constSTYLELINTENABLE=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?[ newStyleLintPlugin({ files:['**/*.css','**/*.less','**/*.js','**/*.html','**/*.vue','**/*.scss'] }) ]:[] ] }
webpack.config.js
"stylelint":{ "extends":"stylelint-config-standard" }, "browserslist":[ ">0.5%",//市场占有率大于百分之零点5 "last2version",//最后两个版本 "notdead"//还没有die ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。