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

前端  /  管理员 发布于 4年前   243

第一步、基础环境

初始化

项目初始化

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(,document.getElementById('root'))

主组件(src/App.js)

import React,{Component} from 'react'class App extends Component{  constructor(){    super()  }  redner(){    return(              App Module          )  }}  

webpack.config.js

const path = require('path')const StyleLintPlugin = require('stylelint-webpack-plugin')const STYLELINTENABLE = truemodule.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 ]

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

您可能感兴趣的文章:

• 详解如何用webpack4从零开始构建react开发环境
• Webpack 4.x搭建react开发环境的方法步骤
• webpack手动配置React开发环境的步骤
• 从零开始搭建webpack+react开发环境的详细步骤
• 使用webpack搭建react开发环境的方法
• 详解Webpack+Babel+React开发环境的搭建的方法步骤
• webpack 2.x配置reactjs基本开发环境详解