React webpack4 es6搭建PC开发脚手架

最新推荐文章于 2024-08-25 23:10:32 发布

DenggLin

最新推荐文章于 2024-08-25 23:10:32 发布

阅读量983

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_34117170/article/details/84104225

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因webpack4废弃了之前的属性比如loder改为rule等，react高版本也不再支持react.render
故对pc搭建开发脚手架更新
第一步：

新建文件reactpc
cd reactpc
npm init

这时候你会发现reactpc目录下已经多了package,json
第二步：
安装依赖，一大堆依赖

npm install react -s -d react-dom -s babel-core -s -d   babel-loader -s -d  css-loader -s -d   react-hot-loader -s -d webpack-dev-server -s -d  react-router -s -d  webpack -s -d    webpack-cli -s -d   babel-preset-react -s -d  babel-preset-es2015 -s -d    babel-preset-stage-0 -s -d

下面对上边的依赖做个说明


 1. -s -d 分别表示安装依赖到生产环境和开发环境
 2. react和react-dom是开发react必须的核心
 3. babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。ES6现在浏览器都支持的不够, nodejs的v8同样, 即使用use strict, 很多特性也都不支持，babel可以把es6转成传统的javascript, 就可以正常在浏览器中运行了, es6是发展方向
 4. css-loader解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。
 5. react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件
 6. webpack-dev-server 能做到只要代码修改了页面也自动更新了，但webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面
 7. react-router 路由
 8. webpack webpack环境
 9. webpack-cli 在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以可以尝试全局安装webpack-cli
 10.  babel-preset-react -s -d  babel-preset-es2015 -s -d    babel-preset-stage-0 -s -d 是把浏览器不支持的js转译成浏览器支持的js（这也是babel的核心意义）

第三步：

如果你之前没用过webpack，可以先去官网看下，解释的也挺清楚的
官网地址：https://www.webpackjs.com/concepts/
新建webpack.config.js

const path=require('path');
const webpack = require('webpack');
module.exports = {
    mode: "development", //webpack要指定编译类型，可在此处写，也可用命令写
    entry: [
        'webpack/hot/only-dev-server',
        "./src/main.js"//入口文件
    ],
    output: {
        path: path.resolve(__dirname, './build'),//输出目录及文件
        filename: 'bundle.js'
    },
    module: {
        rules: [//此处不能在用loders,需用rules
            {
                test: /\.js|jsx$/,
                loader: 'babel-loader',//转化成浏览器能解析的js
                query:{
                    presets:['es2015','react','stage-0'] //必须先安装babel-preset-es2015和babel-preset-react
                }
            },
            { test: /\.css$/, use: "style!css" }//css样式处理
        ]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),//错误处理
        new webpack.HotModuleReplacementPlugin()//热更新插件和react-hot-loader配合使用
    ],

}

新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./build/bundle.js"></script>
</body>
</html>

新建src文件夹，在其内新建main.js

import React from 'react';
import ReactDOM from 'react-dom';//react高版本需用react-dom
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

第四步：
在package.json 里加入

 "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --p --progress --colors"
  },

整体文件：

{
  "name": "reactagain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --p --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-hot-loader": "^4.3.12",
    "react-router": "^4.3.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }
}

至此已经完成了react的脚手架搭建
现在可以直接运行