React提供了create-react-app的快速构建工具, 但面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...
1.安装webpack
在安装webpack之前，我们先建立一个文件夹并进入，当然你可以用其他方法，我这里就用命令了。
mkdir react-webpack //创建一个react-webpack文件夹
cd react-webpack //切换到react-webpack文件夹内
进入文件夹后对我们的webpack项目进行初始化。命令如下：
npm n init
初始化成功后可以在项目根目录下看到package.json文件。如果你一路按回车感觉有些麻烦，你可以直接加一个-y参数，这样npm就直接给我们生成了。
npm n init -y
package文件生成
package.json文件建立好以后，你可以安装webpack了
npm install --save-dev webpack //在该项目里面安装webpack
npm install -g webpack //全局进行安装webpack
建议使用cnpm来进行安装，这样速度会快很多。安装好后，你会在package.json里看到你安装的版本号。
检测webpack是否安装成：
node_modules/.bin/webpack -v //当前项目安装检测
webpack -v //全局安装检测
版本号显示
安装相关软件包
npm install react react-dom 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
- 在根目录下新建文件夹dist, 在src内加入main.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',
// 配置出口文件
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"
添加scripts配置
在src/index.html中添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack_react 配置练习</title>
</head>
<body>
webpack_react 配置练习
<hr>
我的react显示页面
</body>
</html>
在终端中输入npm run dev ，就可以看到打包结果了。如果没有出现错误，浏览器会自动打开，可以看到我们的编写结果。到这步为止，我们正确安装了webpack，并进行了出入口的配置，也看到了webpack的输出结果。
输出结果
3. 添加对js高级语法的支持
接下来我们配置babel对es6语法的支持, 以及对jsx语法的支持：
在项目根目录, 添加.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>webpack_react 配置练习</title>
</head>
<body>
webpack_react 配置练习
<hr>
我的react显示页面
<hr>
<div id="app"></div>
</body>
</html>
在src/index.js中加入包含jsx语法的react组件
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>显示内容</div>,
document.getElementById("app")
);
在终端运行npm run dev便可以查看到app里面的内容
运行结果
3. 添加对sass、css语法的支持(没兴趣可以跳过)
安装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|css$/, //scss和css文件匹配
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;
}
#app {
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即可
网友评论