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


Posted in Javascript onAugust 06, 2019

第一步、基础环境

初始化

项目初始化

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
 ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
VUE动态生成word的实现
Jul 26 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 #Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 #Javascript
angularjs请求数据的方法示例
Aug 06 #Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 #Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 #Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 #Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
ES6中的类(Class)示例详解
2020/12/09 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python3 线性回归验证方法
2019/07/09 Python
大学生工作推荐信范文
2013/12/02 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
党员教师一句话承诺
2014/05/30 职场文书
科技之星事迹材料
2014/06/02 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
海洋天堂观后感
2015/06/05 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技