当前位置：首页 > news >正文

一个做搞笑类视频的网站取名新开传奇网站发布站

news 2025/7/6 10:06:21

一个做搞笑类视频的网站取名,新开传奇网站发布站,深圳做网站汉狮网络,找哪些公司做网站因webpack4废弃了之前的属性比如loder改为rule等，react高版本也不再支持react.render 故对pc搭建开发脚手架更新第一步： 新建文件reactpc cd reactpc npm init这时候你会发现reactpc目录下已经多了package,json 第二步： 安装依赖&#xff0…

因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-cli10.  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',//转化成浏览器能解析的jsquery:{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的脚手架搭建
现在可以直接运行