最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空”
从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。
最近在玩webpack+react+移动端，那么第一步自然是搭建相关的环境，本来网上的教程很不错，只是前端相关的东西发展太过迅猛，只相隔了半年有些东西的版本就不对了，有些配置、命令等照着之前的教程做就可能会掉到坑里去，别问我怎么知道的，我刚刚从坑里爬出来，因此赶紧写篇文章来记录一下，也算是让自己再巩固一下。
本篇完全是从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。会把一个小白的经历原原本本的写出来，遇到的坑都用红色的坑字标注出来，由于我也是第一次学习相关的知识点如果有不正确的地方也多多欢迎大家来指出。
本篇文章写作的日期是2018-7-21，因此所有依赖的版本到当前日期为止，以后如果有升级变化的话，那也是无法当前预料得到的。我的操作系统是win7，因此不涉及到linux的相关知识点。编辑器是Sublime Text3.0，顺便安利一下Sublime Text，好用速度又快，真心不错！
我是参考这篇教程：https://segmentfault.com/a/1190000006178770
现在让我们开始吧，第一步我们先配置一个webpack的web服务器。
webpack依赖于node.js，那么第一步是安装node.js，这个没什么好说的，windows环境的安装就更友好了，官网下载安装包，一路默认安装即可，现在的node.js安装完毕后，npm也就自带安装好了，后面我们就要一路与npm打交道了。
首先我们要用npm初始化项目，电脑上新建一个目录保存我们的练习文件，随后进入cmd命令行，转到该目录下。如果命令行不会操作的话，请先掌握cd这个命令。接下来在该目录下输入npm init命令：
npm init
根据提示一路回车就可以了，不过这个地方可能会有一个坑存在，如图：
这里报错：Sorry，name can only contain URL-friendly characters。
该错误产生的原因是npm初始化时，会向我们询问项目名，如果我们不指定的话（通常都是如此），那么就会用当前文件夹来命名，而我们的文件夹的名称为“练习-react环境”，其包含了一个中划线（-），因此导致命名错误了。那么我们只要输入一个项目名称（譬如test）就可以了， 或者干脆把文件夹重命名为符合规范的名称就可以了。
本例中我们手动输入了test，将项目名称指定为test：
接下来就一路回车，最后询问“Is this OK？<y>”时输入y后回车，完成npm初始化。
npm初始化后，在文件夹下将会出现一个node_modules文件夹（目前为空），以及pack.json文件。其实我们刚才npm init命令就是为了配置这个package.json，因此也可以完全自己来手动创建。
接下来安装webpack和webpack-dev-server，执行命令：
npm install webpack webpack-dev-server --save-dev
安装webpack很顺利，没有遇到任何问题。
安装完毕后，node_modules文件夹中就不再为空了，里面存放的都是webpack的相关依赖。package.json中也多了"dependencies"和"devDependencies"两项，其记录的是当前依赖及版本信息，其中"dependencies"为空。
"devDependencies": {
"webpack": "^4.16.1",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
}
随后在当前文件夹下新建一个public文件夹（文件夹名任意），在里面写一个index.html页面，内容随意。接下来我们就要配置webpack了，在文件夹下新建一个webpack.config.js文件，此时目录结构为：
编辑webpack.config.js，由于我们的目的是创建一个web服务器，因此只需要配置以下内容：
module.exports={
devServer:{
contentBase:"./public"
}
}
devServer是webpack中web服务器的相关配置项，contentBase指定的是页面加载目录，而其加载页面默认为index.html，由于我们的index.html是在public目录下，因此就将contentBase设置为"./public“。
接下来在package.json中配置web服务启动命令，该命令配置在scripts中的，其命令名称为“server”，命令详情为“webpack-dev-sever --open”：
"server":"webpack-dev-server --open"
将其插入scripts中：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server --open"
},
在命令行中输入"npm run server”回车以便启动web服务，此时会遇到一个坑，webpack并没有启动web服务，而是报错：
其大意是缺少webpack-cli，那么我们自然就安装这个webpack-cli，执行命令：
npm install webpack-cli --save-dev
webpack-cli安装过程很顺利，随后再执行“npm run server”就可以正常启动web服务了，并且启动默认浏览器，显示public下的Index.html页面，web服务的默认端口是8080。
至此，我们第一部分的目的：启动一个web服务便完成了，总结一下，要从零开始启动webpack的web服务需要做：
安装node.js、npm
安装webpack、webpack-cli、webpack-server-dev
npm初始化
编写一个显示页面并命名为index.html
创建webpack.config.js，并配置devServer信息。
配置package.json，设置web启动命令。
到目前为止，我们丝毫未提及另一位主角：react，接下来我们就继续搭建环境，让其支持react。首先自然是要安装react，我们需要安装react和react-dom，执行命令：
npm install react react-dom --save
由于react是在正式环境中也需要的，因此npm安装时没有带-dev参数。
接下来修改之前的index.html，不管以前是怎么编写的，请在HTML中增加一个 <div>，将其的ID设置为"boot“，同时编写外部js引入，引入的js名为bundle.js。
<body>
<div id='root'></div>
<script src='bundle.js'></script>
</body>
接下来在public目录下创建index.jsx文件，注意后缀名是jsx，其内容为：
import React from 'react'
import { render } from 'react-dom' class Hello extends React.Component {
render() {
return (
<p>hello react！</p>
)
}
}
render(
<Hello/>,
document.getElementById('root')
)
react的语法细节我们暂时不关心，只要知道最后页面上会输出hello react！就可以了。
jsx是react的专用语法，HTML是无法引用的，因此我们需要将其转换为HTML能够识别的JS，而这个正是webpack大显身手的时候，我们开始来配置webpack，配置之前，再确认一下的当前的目录结构：
首先我们是通过babel来转换jsx的，因此需要安装babel相关的环境，我们需要安装：
babel-core
babel-loader
babel-preset-es2015
babel-preset-react
执行命令：
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
由于我们要转换的源文件是index.jsx，转换后的目标文件是bundle.js，因此需要在webpack中配置入口和出口，在文本webpack.config.js中增加以下内容：
entry:__dirname+"/public/index.jsx",
output:{
path:__dirname+"/public",
filename:'bundle.js'
}
entry是转换的入口，而output是转换的出口。
同时还要在webpack.config.js中配置loader，让其通过外部工具来处理文件，而我们当前要处理的是通过babel来处理jsx文件。因此到了这一步我们大致会有些明白了，并不是webpack本身帮我们处理这些，而是像个中介一样，把要处理的部分与相关的工具联系在一起。
我们在webpack.config.js中加入：
module: {
loaders: [
{ test: /\.(jsx)$/, exclude: /node_modules/, loader: 'babel' }
]
}
其表明jsx文件需要用babel来处理，但是对于node_modules文件夹中的文件忽略掉（exclude设置）。此时webpack.config.js的内容就是：
module.exports={
entry:__dirname+"/app/index.jsx",
output:{
path:__dirname+"/app",
filename:'bundle.js'
},
devServer:{
contentBase:"./public"
},
module: {
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' }
]
}
};
照理来说，到了这一步所有该做的事情都已经做完了，通过babel将index.jsx解析成bundle.js，Web服务将启动index.html，而index.html会引入bundle.js，最后在页面上显示hello react！
但是，事情往往不是那么顺利的，接下里要继续踩坑！首先我们先执行npm run server看看是什么情况：
马上就遇到坑，刺眼的红色错误提示，意思居然是loaders属性无效？！问题出现在webpack版本上，我们安装的版本是4.16.1，此时webpack.config.js中loaders的写法已经过时，应该用rules，同时babel也应该用babel-loader来替代，实际的写法为：
module: {
rules: [
{ test: /\.(jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
此时webpack.config.js的内容为：
module.exports={
entry:__dirname+"/app/index.jsx",
output:{
path:__dirname+"/app",
filename:'bundle.js'
},
devServer:{
contentBase:"./public"
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
};
接下来继续试试npm run server，依然报错：
此处仍然有一坑！由于我们的jsx是用es6语法编写的，因此需要通过label来解析，那么实际上此处还缺少一个文件，就是“.babelrc”，注意这是一个名称很奇葩的文件，只有扩展名而没有文件名，该文件在windows环境下是无法通过资源管理器创建的，需要到命令行下执行type null>.babelrc命令：
type null>.babelrc
虽然提示“系统找不到指定的文件”，但是实际上已经创建了.babelrc文件，随后用文本编辑器将该文件打开，输入内容：
{
"presets": ["react", "es2015"],
"env": {
"dev": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
至此，再执行npm run server，终于可以看到页面正常显示了！
如果此时页面还不能正常显示的话，也许就要清理下缓存，重新生成bundle.js文件。或者在package.json中的scripts中增加“start“命令，其值为“webpack”，即：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
这样在命令行中执行“npm start”就可以重新编译jsx为bundle.js了。
npm start
再总结一下我们遇到的坑：
npm初始化时的项目名称要合规，特别是不能出现中划线下划线。
安装webpack-cli。
loaders已过时，需要替换为rules。
需要创建.babelrc文件。
至此我们便搭建了一个最简单的webpack+react环境，当我们修改index.jsx中的内容时，页面刷新后也会发生改变，接下来就可以好好学习react了！
当然，我们可以更改webpack.config.js中的devServer，添加inline:true，这样便可以实现jsx更改后，页面会自动刷新，不用我们每次修改后都去手动刷新去看效果了。另外再增加mode:"development"，这样刷新的速度会大大加快！
最终的文件目录结构为：
各文件的最终内容：
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='root'></div>
<script src='bundle.js'></script>
</body>
</html>
index.jsx
import React from 'react'
import { render } from 'react-dom' class Home extends React.Component{
render(){
return(
<p>Hello react!</p>
)
}
}
render(
<Hello />,document.getElementById('root')
)
.babelrc
{
"presets": ["react", "es2015"],
"env": {
"dev": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.16.1",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
}
}
webpack.config.js
module.exports={
mode:"development",
entry:__dirname+"/app/index.jsx",
output:{
path:__dirname+"/app",
filename:'bundle.js'
},
devServer:{
contentBase:"./public",
inline:true
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
};
最小白的webpack+react环境搭建的更多相关文章
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- React 环境搭建及页面调试方法
React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
- 从零开始react实战:云书签-1 react环境搭建
总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...
- vue+webpack项目环境搭建
首先安装node.js 下载地址:https://nodejs.org/en/download/ 看下是否成功安装 node -v 安装webpack,命令行npm install webpack - ...
- react环境搭建及文件配置
webpack简介 构建工具(基于Nodejs)node(v16)前端工程化. 环境搭建 创建一个空的package.json npm init webpack核心包(提供了API,插件) npm i ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- 使用webpack && react环境
使用webpack webpack是一款模块化的打包工具,它认为所有的文件都是模块,包括js,css等等,版本为2.x推荐学习,1.x版本已废弃,不建议使用. 目前,facebook官方就是使用web ...
随机推荐
- 【bzoj4939】【YNOI2016】掉进兔子洞（莫队）
题目描述 您正在打galgame,然后突然发现您今天太颓了,于是想写个数据结构题练练手: 一个长为 n 的序列 a. 有 m 个询问,每次询问三个区间,把三个区间中同时出现的数一个一个删掉,问最后三个 ...
- 验证码(captcha)的由来
如果您允许用户在您的网站上发表内容,如留下评论和创建用户配置文件,那么您可能会看到,垃圾留言散播者试图利用这些渠道来给他们自己的网站创造流量.在您的网站上出现这类垃圾留言,对任何人来说都不愉快.用户可 ...
- CF796C Bank Hacking 思维
Although Inzane successfully found his beloved bone, Zane, his owner, has yet to return. To search f ...
- CoreAnimation 核心动画 / CABasicAnimation/ CAKeyframeAnimation
- (void)createBaseAnimation{ //基础动画 CABasicAnimation *animation = [CABasicAnimation animation]; anim ...
- JDK的详细安装步骤
jdk的安装 一.下载jdk安装包,可以从https://www.cnblogs.com/zyx110/p/10799387.html中查找并下载 二.双击打开jdk安装包,一路傻瓜式安装,点击下一步 ...
- java的Spring学习1--spring引用及属性(setter,getter)注入
1.目录结构 项目->src->main->java->com.test.ppmoney 设置java文件夹为代码 在Project Structure 里的 Modules ...
- Nginx根据目录自动生成二级域名
前言: 每次创建二级域名如果都修改一次配置文件的话,项目多了会带来很多不必要的工作量,如果能够在一个web目录下创建一个文件夹并且自动生成文件目录的话,那真是极好的,本文就基于Nginx贴出这 ...
- idea（1）-idea初装
1.安装插件 Alibaba Java Coding Guidelines Free Mybatis plugin MyBatis Log Plugin Lombok pluginGsonFormat ...
- my29_PXC集群状态查看
节点从集群中移除的状态 show status like '%wsrep%';wsrep_cluster_status为Disconnected则表示该节点已经不在集群中了,示例如下 > sho ...
- 性能测试工具LoadRunner30-LR之监控Tomcat
步骤: 1.通过LR去访问tomcat监控页(安装tomcat的过程可以百度一下) 2.然后通过关联取监控数据 3.通过lr_user_data_point()添加数据到图表中去 double ato ...