webpack手动配置React开发环境
96 木子昭 9fac7464 ce5a 4b50 81fc a15390361a6e
0.1 2018.07.01 16:24 字数 394 阅读 3831评论 11喜欢 36赞赏 1
React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能…
- 首先用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中添加内容
react-webpack-demo react-webpack-demo 高堂明镜悲白发, 朝如青丝暮成雪 在命令行内运行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节点
react-webpack-demo <hr> 高堂明镜悲白发, 朝如青丝暮成雪 <hr> <div id="root"></div>在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( , 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;@functionpx2rem(designWidth: 750;
@function px2rem(designWidth:750;@functionpx2rem(px) {
@return px∗10/px*10/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/1zGRtjltIcqVVJRFNHFhxAw 密码:6lwm
- webpack手动配置React开发环境的步骤
- webpack 配置 react 开发环境
- 从零开始使用webpack(4.x)+bable+react+ant-design配置单页面应用开发环境(附模板)
- react+webpack+babel通用的简易开发环境配置
- React+webpack 的开发环境配置步骤(二)
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- React+webpack 的开发环境配置步骤(五)
- React+webpack 的开发环境配置步骤(三)
- React + Typescript + Webpack 开发环境配置
- node下使用webpack构建react开发环境,_______react 配置 mobx
- React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)
- webpack开发环境配置
- webpack入门+react环境配置
- 手把手教你webpack、react和node.js环境配置(下篇)
- 使用webpack和babel搭建react开发环境
- 手把手教你webpack、react和node.js环境配置(上篇)
- Webpack配置开发环境和生产环境
- [置顶] React - Webpack 开发环境重新搭建
- 分离Webpack开发环境与生产环境的配置
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)