搭建的环境
首先查看node.js是不是10以上
node -v
项目搭建
第一步 :新建一个文件夹 为 react-stack
第二步: 在文件夹里面打开命令行 输入一下的指令
npm install -y 生成 package.json文件
//安装webpack 项目依赖和全局都要安装
cnpm install webpack -g
cnpm install webpack-cli -g
cnpm install webpack -D
cnpm install webpack-cli -D
创建一个配置文件 webpack.config.js
1 设置入口文件:entry选项
2 设置出口:output选项
代码如下:
const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'production',
// 入口:指定webpack打包或本地服务运行时的程序入口文件
// entry: './src/main.js'
entry: path.resolve(__dirname, './src/main.js'),
// 出口:打包之后,打包的结果放在哪里 dist
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
}
在package.json文件里配置打包文件
"build": "webpack --config webpack.config.js",
打包命令: webpack --config xxx.config.js
使用pulgins
1、html-webpack-plugin
它的作用是自动生成一个index.html单页面,并且把打包后.js脚本文件插入进去。
安装命令
cnpm install html-webpack-plugin -D
在webpack.config.js 配置
// plugins:用于扩展功能
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
title: 'react'
}),
new CleanWebpackPlugin(),
// 用于热更新功能
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
2、clean-webpack-plugin
它的作用是自动删除目录中的dist文件夹,无需手动操作了
搭建devServer
安装命令
cnpm install webpack-dev-server -D
cnpm install webpack-dev-server -g
在webpack.config.js 配置
devServer: {
port: '8090',
open: true,
contentBase: path.resolve(__dirname, 'public'),
hot: true // 开启热更新功能
}
开启HMR热更新功能
HMR的作用是:局部代码发生变化时,不用刷新整个页面(重新编译)即可自动更新,速度比较快。
1.在devServer中添加 hot:true
2,引入webpack模块 添加插件
使用css和scss
安装命令
cnpm install style-loader -D
cnpm install css-loader -D
cnpm istall sass-loader -D
cnpm install node-sass -D
在webpack.config.js 配置
module:{
rules:[
{test:/\.(css|scss)$/, use:['style-loader','css-loader','sass-loader']}
]
},
在安装node-sass的时候很容易安装不上 当你第二次安装的时候安装上了 运行的时候可能会报错,这时候你只要把node_modules的依赖包删除重新 安装这样就可以解决的
使用JSBabel
JS编译器,把ES6(下一代ECMAScript)转化成浏览器能够兼容的ES5代码
安装命令:
cnpm install babel-loder -D
cnpm install @babel/core -D
配置
rules: [
{test:/\.js$/, use:['babel-loader'], exclude: /node_modules/}
]
使用ESLint
ESLint地址
安装
cnpm install eslint-loader -D
cnpm install eslint -D
配置
rules: [
{test:/\.js$/, use:['eslint-loder',], exclude:/node_modules/, enforce:'pre'}
]
ExtractTextWebpackPlugin
注意:要求git仓库中去找
安装
cnpm install mini-css-extract-plugin -D
配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
新建一个.exlintrc.json的文件
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
//在rules里面可以设置禁止使用的代码
"rules": {
}
}
生产环境和开发环境的分布
安装插件
cnom install cross-env -D
在package.json里面配置cross-nev NODE_ENV=production
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
}
}
production: 生产环境
development:开发环境
根据cross-env NODE_ENV=production 来区别开发环境和生产环境
react组件的分装
第一步:先安装Babel插件
插件的地址
cnpm install @babel/preset-react -D 支持jsx语法的babel插件
cnpm install @babel/preset-env -D 支持ES6中较新的语法
第二步:创建.baberlrc.json的文件配置
{
"presets": [
["@babel/preset-react"],
["@babel/preset-env",{"useBuiltIns": "entry"}]
]
}
第三步:封装组件
//引入react
import React from 'react'
//定义react的根组件
export defulat class App extends React.component{
constructor(props){
super(props)
}
render (){
return (
<div>
<h1> 你好! </h1>
</div>
)
}
}
第四步:把封装好的组件渲染到真实的DOM上
//引入
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(< App /> , document.getElementById('root'))
注意:在index.html 里的 root这个div 里不能有任何的子元素,给个空div就可以了