webpack手动配置React开发环境的步骤
React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...
1. 首先用npm初始化环境
mkdir react-webpack-demo cd react-webpack-demo npm init -y
安装相关软件包
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -D npm install babel-core babel-loader babel-plugin-transform-runtime -D npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D # 识别html转换为jsx语法 npm install babel-preset-react -D
2.添加对html静态文件的支持
- 在根目录下新建文件夹src, 在src内加入index.html index.js
- 在根目录下新建webpack.config.js
- 在webpack.config.js中加入如下配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 负责将html文档虚拟到根目录下
let htmlWebpackPlugin = new HtmlWebpackPlugin({
// 虚拟的html文件名 index.html
filename: 'index.html',
// 虚拟html的模板为 src下的index.html
template: path.resolve(__dirname, './src/index.html')
})
module.exports = {
// 开发模式
mode: 'development',
// 配置入口文件
entry: './src/index.js',
// 出口文件目录为根目录下dist, 输出的文件名为main
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
// 配置开发服务器, 并配置自动刷新
devServer: {
// 根目录下dist为基本目录
contentBase: path.join(__dirname, 'dist'),
// 自动压缩代码
compress: true,
// 服务端口为1208
port: 1208,
// 自动打开浏览器
open: true
},
// 装载虚拟目录插件
plugins: [htmlWebpackPlugin],
}
在package.json内scripts中添加"dev": "webpack-dev-server"
在src/index.html中添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react-webpack-demo</title> </head> <body> react-webpack-demo <hr> 高堂明镜悲白发, 朝如青丝暮成雪 </body> </html>
在命令行内运行npm run dev, 即可看到刚添加的index.html内容
接下来我们配置babel对es6语法的支持, 以及对jsx语法的支持
3. 添加对js高级语法的支持
在项目根目录, 添加.babelrc配置文件 presets为语法配置,plugins为插件配置
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
在webpack.config.js中添加module字段, 进行插件loader配置
// webpack.config.js
module.exports = {
...
// 配置loader
module: {
// 根据文件后缀匹配规则
rules: [
// 配置js/jsx语法解析
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
};
在src/index.html中加入id为root的div节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react-webpack-demo</title> </head> <body> react-webpack-demo <hr> 高堂明镜悲白发, 朝如青丝暮成雪 <hr> <div id="root"></div> </body> </html>
在src/index.js中加入包含jsx语法的react组件
import React from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
this.decrease = this.decrease.bind(this);
this.increase = this.increase.bind(this);
}
// 加1
increase() {
let self = this;
self.setState({ number: self.state.number + 1 })
}
// 减一
decrease() {
let self = this;
self.setState({ number: self.state.number - 1 })
}
render() {
return (
<div>
<input type = "button" value = "减1"onClick = { this.decrease }/>
<span> { this.state.number } </span>
<input type = "button" value = "加1" onClick = { this.increase }/>
</div> )
}
}
ReactDOM.render(<Counter /> , document.getElementById('root'))
附录: 添加对sass语法的支持(没兴趣可以跳过)
安装sass相关的loader
npm install style-loader css-loader node-sass sass-loader -D
在webpack.config.js内新增规则
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
}
};
在src内新增index.scss
$designWidth: 750;
@function px2rem($px) {
@return $px*10/$designWidth + rem;
}
#root {
div {
font-size: px2rem(500);
display: flex;
color: #64B587;
input {
flex: 1 1 auto;
}
span {
flex: 1 1 auto;
text-align: center;
}
}
}
在index.js中新增import index.scss
最终效果:
文中相关资源链接:链接: https://pan.baidu.com/s/10PYXo_WoIScn-IFRdtuc5w 密码: td78
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解Webpack+Babel+React开发环境的搭建的方法步骤
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的
-
从零开始搭建webpack+react开发环境的详细步骤
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 babel-preset-env@1.6.1 bable-preset-react@6.24.1 webpack安装及配置 1. 起步 新建项目目录,初始化npm,新建开发源目录 mkdir webpack-react && cd webpack-react npm init -y mkdir sr
-
使用webpack搭建react开发环境的方法
1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新
-
webpack 2.x配置reactjs基本开发环境详解
本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打
-
webpack手动配置React开发环境的步骤
React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能... 1. 首先用npm初始化环境 mkdir react-webpack-demo cd react-webpack-demo npm init -y 安装相关软件包 npm install r
-
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想. 通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法. 编辑器安装插件 在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置 配置ESLint 基础配置 项目中安装 babel-eslint ,
-
Android Studio配置Kotlin开发环境详细步骤
Android Studio配置Kotlin开发环境详细步骤 第一步:安装Kotlin插件 打开Settings面板,找到Plugins选项,点击Browse repositories(浏览仓库),输入"Kotlin"查找,然后安装即可.安装完成之后需要重启Android Studio (切记!). 安装完成之后如下图所示. 插件当前的最新版本是1.1.2-release-Studio-2.3-3. 第二步:配置Kotlin开发环境 点击菜单栏的"Tools"选项,
-
手把手教你vscode配置golang开发环境的步骤
1.下载安装Golang https://golang.google.cn/dl/ 一路下一步即可 2.下载安装Vscode https://visualstudio.microsoft.com/zh-hans/ 3.检查Golang是否安装成功 4.设置Golang 环境变量 go env -w GO111MODULE=on Golang1.16默认开启,1.16一下需要执行这条命令 go env -w GOPROXY=https://goproxy.cn,direct 设置七牛CDN 我的环
-
VSCode+PHPstudy配置PHP开发环境的步骤详解
第一步:下载安装VSCode编辑器 第二步:下载安装PHPstudy集成环境 第三步:打开PHPstudy,选择界面左侧中的环境 第四步:点击右侧PHP运行环境下面的更多,选择适合的PHP版本 第五步:点击PHPstudy左侧环境,再点击右侧PHP选项中的设置,在弹出的界面中选择扩展组件,再点击XDebug调试组件,记住端口监听号是多少,最后点击确认 第六步:点击PHPstudy左侧的首页,点击WNMP红点切换适合的Web服务器,然后点击启动 第七步:打开VSCode编辑器,在欢迎使用界面中,找
-
Webpack 4.x搭建react开发环境的方法步骤
本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记 必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&
-
Electron整合React使用搭建开发环境的步骤详解
简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const
-
vs2019永久配置opencv开发环境的方法步骤
有很多同学肯定想学习opencv相关的知识,但是有些情况下每建一次项目都要重新引入下各种文件是不是很苦恼,所以我也面临了这个问题,在网上看到很多的同学的方法,有的也都是很一样的,将什么.dll加入环境变量,然后设置项目配置文件什么的,这些东西我也尝试过,但是很容易忘记,我也特意写了一些笔记,但是有时还是会忘记.恰巧我也升级了vs2019,所以也打算更新下方法,做到一劳永逸.下面是教程部分.首先我们要安装好我们的opencv,然后我们安装以后会看到生成的文件夹.如图 这一切就是基础文件,所以这个务
-
VSCODE+cmake配置C++开发环境的实现步骤
1.引言 在实习期间,感受到在vs code上编程的优势(实习期间主要写的lua脚本),因此想把C++和python的开发也迁移到vs code上.如果只运行一个简单的.cpp文件,那么使用万能的Code Runner插件就可以完成编译等任务.但是,一般的C++开发中,不可能只有一个.cpp文件,还会自定义头文件和相应的源文件,此时Code Runner就无法满足我们的要求.对于编译多个C++源文件,我网上查到的资料主要有两种方法: (1)配置tasks.json文件 在tasks.json文件