react创建webpack服务器
在创建webpack服务器之前首先要能够 npm start 启动成功,但是由于我之前的错误操作,导致它一直启动不起来
原因:是启动的位置被我切换错了,你启动npm的时候,必须在 package.json的文件下,此时会启动成功
1.创建webpack服务器(注意:webpack的服务器是基于nodejs)
1.webpack服务器全局安装
命令:npm install -g webpack-dev-server
2.安装项目依赖
命令:npm install webpack-dev-server --save-dev
3.webpack的服务器默认端口是8080,可以通过port进行修改
4.运行webpack服务器
启动:webpack-dev-server
5.配置服务器
注意:以下配置是在package.json文件中书写
"scripts": {
"start": "webpack",
"build": "webpack-dev-server"
}
运行:npm run build
此处忘记了截图,不过还就是在webpack文件下运行,如果前面步骤都没有出错的话,应该会顺利执行的
6.配置热更新
命令:webpack-dev-server --content-base build --inline --hot
7.将热更新命令加入到配置中
"scripts": {
"start": "webpack",
"build": "webpack-dev-server --content-base build --inline --hot"
}
(此处恍然大悟,我的json配置文件中似乎是 --inline 后面的--hot没有写,待会加上,看看有没有成功(菜鸟们要注意了,学习的时候千万不要丢三落四的))
运行 :npm run build
8.服务器参数:
content-base:默认路径的文件
port:端口,默认8080
color:在控制台可以看到不一样颜色的内容
inline hot :主动刷新页面
1.Loaders:
loader是webpack可以通过配置脚本,或者外部依赖来执行一些功能
1.配置loader需要在webpack.config.js文件下:
1.test:一个匹配loader要做操作的文件的一个正则表达式(必须)
2.loader:loader要执行的任务的名字(必须)
3.query:为loader提供一些外部选项配置
2.json格式的数据转化成js的对象
1.安装一个json的loader:
1.命令:npm install --save-dev json-loader
2.配置:需要在webpack.config.js文件中loader的配置
3.创建一个json格式的数据文件
(以下配置是在webpack.config.js文件中执行)
module:{
loaders:[
//配置json格式的转换
{
test:/\.json$/,
loader:"json-loader"
}
]
}
3.创建json文件
4.执行
2.babel
1.提供给我用来对es6进行编译成es5,jsx语法她也可以进行编译
2.babel安装
1.安装依赖包
命令:npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react (一次性安装所有的)
3.搭建react环境
安装:npm install --save-dev react react-dom
4.修改hello.js 文件和app.js文件
hello.js:
import React from "react";
export default class Hello extends React.Component{
render(){
return(
<div>我是Hello文件的信息</div>
)
}
}
app.js:
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello.js";
class App extends React.Component{
render(){
return(
<div>
<Hello />
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("root"));
以上需要注意的:
1.es6的语法
2.react es6 的写法
这是昨天一天的学习内容,但我发现最后启动服务的时候会报错,一下是由于自己粗心,把中文逗号加了上去,于是我就改了一下
但是不知为何,依旧报错
由于本人昨天心情太好,就没有继续搞,但是刚刚在做笔记的时候,我发现好像是前面的一小步走错了导致的,今天就继续学习学习
衷心谨言:
学习一个东西的时候不要轻言放弃,因为当你成功的实现每个功能的时候,那种心情真的是很美丽,而且也不要怕错,错了我们就学习着怎样解决它,因为错可以让你成长,可以让你懂得更多的东西。
学习是一种快乐的体验,不要轻言放弃哦!
--给今天的自己一个美丽的警告
以上是 react创建webpack服务器 的全部内容, 来源链接: utcz.com/z/384004.html