前言
这几天断断续续地学习React.js,然后想尝试用react做一些实战的小项目,深入了解react的本质。网上有很多类似这个教程的,但有些比较旧的,有些讲的不太具体,然后我就一边参考并且修改,一边coding,记录下~
技术栈:webpack4 + react + react-router-dom
作为一枚前端er,应该知道webpack4有个最大的特点,就是能实现零配置的自由。本来想用 快速搭建一个项目的,但又想我正好要学习webpack4,不妨就一起学下,了解零配置是怎么实现的,是怎么配置的。
----------- It's show time -----------
1、初始化项目,安装插件
- 先建立一个文件夹,然后初始化package.json
mkdir react-demo && cd react-demo //建立react-demo并进入react-demo
npm init -y //快速初始化package.json
然后就会发现react-dome生成一个package.json,我们安装的插件,信息都在这个文件里面。
- 安装相关webpack的插件
开始安装react的插件,首先要安装webpack的插件,我用yarn来管理插件,也可以用npm。
需要安装的插件:
1、webpack
2、webpack-cli:webpack的命令工具,既然安装webpack,就必要安装这个
3、webpack-dev-server:启动http服务
4、webpack-merge: 引用通用的配置来组合,比如开发环境的配置和生产环境的配置共用一个common.js
yarn add webpack webpack-cli webpack-dev-server webpack-merge --dev
- 安装相关react的插件
目前就安装react,react-dom
yarn add react react-dom
- 安装相关babel的插件
既然用react,那就需要用到babel的插件
需要的插件
1、babel-loader:文件处理器,加载js文件
2、@babel/core:最新的版本,之前是babel-core,是babel的核心功能
3、@babel/preset-env:也是最新的版本,之前是babel-preset-env。因为webpack不能识别es6以上,所以需要这个插件来转换es5
4、@babel/preset-react:也是最新的版本,之前是babel-preset-react,用来转换react的语法
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev
- 安装html-webpack-plugin的插件
自动生成html文件,尤其能随着编译的变化而变化,不需要手动改变bundle.js
//安装插件
yarn add html-webpack-plugin --dev
2、配置webpack
配置webpack之前,首先要考虑怎么配置webpack,为了后面方便维护或者方便管理的,我们通常会把开发环境和生产环境分开管理,各自修改或者维护。然后我就参考这个思维,就在项目根目录下新建一个config的文件夹,然后建立三个文件,一个是通用的配置(webpack.common.js),一个是开发环境的配置(webpack.dev.js),一个是生产环境的配置(webpack.prod.js),如图下:
- 通用的配置
开发和生产环境的通用配置放到这个,比如说设置入口,出口打包
//webpack.common.js
const path=require('path'); //路径的api
const HtmlWebpackPlugin=require('html-webpack-plugin');//引用html-webpack-plugin
module.exports={
//入口的设置
entry:{
app:'./src/index.js', //入口的文件名
},
//http服务的设置
devServer:{ //利用上面的webpack-dev-server插件
port:1234 //端口号,默认是8080,8080这个端口号很容易被占用,前端应该不常出现。反正我喜欢设置1234
},
//管理资源
module:{
rules:[
{
//加载js
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
}
]
},
//出口的设置
output:{
filename:'[name].bundle.js',//命名文件
path:path.resolve(__dirname,'../dist')//生成的位置
}
}
- 开发环境的配置
//webpack.dev.js
const common=require('./webpack.common.js');//引用通用配置
const merge=require('webpack-merge');//引用webpack-merge插件
module.exports=merge(common,{
mode:'development', //开发的模式
})
目前的配置就简单点,后面需要的时候就再扩展
- 生产环境的配置
//webpack.prod.js
const merge=require('webpack-merge');
const common=require('./webpack.common.js');
module.exports=merge(common,{
mode:'production'
})
- 既然用react和es6,那就需要配置.babelrc,就在项目的根目录下新建
//.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
]
}
- 我们一般用命令行来启动开发环境的运行,或者打包的。这个还要配置的,就在package.json里增加
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack-dev-server --config config/webpack.dev.js --open", //开发环境,根据config文件夹下的webpack.dev.js文件的配置,--open这个是自动开启浏览器
+ "build": "webpack --config config/webpack.prod.js"//生产环境,根据config文件夹下的webpack.prod.js文件的配置
},
webpack配置差不多到此为止了,如果还有问题的话,那就再回来改造~
开始react的表演
程序员通常喜欢用Hello World来开始的,那么我也从Hello React开始,看看webpack的配置对不对
- 首先在项目的根目录下新建public,放index.html
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>react demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
有没有发现,我还没引用bundle.js。然后这就需要在wbepack里配置
//webpack.common.js
devServer:{ //利用上面的webpack-dev-server插件
port:1234 //端口号,默认是8080,8080这个端口号很容易被占用,前端应该不常出现。反正我喜欢设置1234
},
//新增的代码块
+ plugins:[
+ new HtmlWebpackPlugin({
+ template:'public/index.html',//指定的html模板,这个会自动帮我引用下面output出口设置的文件名。
+ })
+ ],
- 在项目的根目录下新建src文件夹,然后再新建index.js文件
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello React.js</h1>,
document.getElementById('root'),
)
应该差不多了,那就试试yarn start(package.json中的start)
yarn start
然后浏览器就会自动开启,就能看到大大的“Hello React”。
yarn build
就能看到dist的文件夹,这个是打包后的文件夹,可以看看html的代码,会发现多了一个script的引用,是html-webpack-plugin的作用。
零配置的搭建就到此为止,后会有期~