webpack+react环境搭建
一、webpack环境搭建
1、准备工作
因为webpack依赖于nodejs，因此我们应首先安装nodejs；而npm是js包管理工具，接着我们应该安装npm，
sudo apt-get update //执行检查可更新的软件
sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
2、初始化我们的项目
#项目文件
mkdir blog && cd blog
#项目初始化，生成项目描述文件package.json
npm init
3、安装webpack和webpack-dev-server
npm install webpack webpack-dev-server --save-dev
这会在项目文件里面创建node_modules，package.json中也多了"dependencies"和"devDependencies"两项，其记录的是当前依赖及版本信息，其中"dependencies"为空
4、创建入口文件index.html
#在项目文件blog下面新建public/index.html
mkdir public && touch index.html
5、配置webpack
入口文件创建好之后，我们就要配置webpack了。在项目文件blog下面新建文件webpack.config.js，编辑webpack.config.js配置：
module.exports={
devServer:{
contentBase:"./public"
}
}
因为我们的目的是创建一个web服务器，只要添加如上内容就ok了。
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": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server --open"
},
6、安装webpack-cli
我们只安装了webpack服务，而webpack命令是通过webpack-cli来执行的，因此我们必须安装：
npm install webpack-cli --save-dev
现在我们就可以启动他了
npm run server
二、react环境搭建
到目前为止我们都只是在讲述webpack,接下来的环境搭建，我们就要明白如何使其支持react了
1、安装react
npm install react react-dom --save
由于react是在正式环境中也需要的，因此npm安装时没有带-dev参数。
2、代码创建
既然webpack和react我们都安装好了，那我们就的试试实战了，我们编辑之前创建好的文件：
<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 HelloMessage extends React.Component {
render() {
return (
<h1>hello react! </h1>
)
}
}
render(
<HelloMessage/>,
document.getElementById('root')
)
jsx是react的专用语法，HTML是无法引用的，因此我们需要将其转换为HTML能够识别的JS，而这个正是webpack大显身手的时候，我们开始来配置webpack，配置之前，我们的安装babel环境。
3、安装babel环境
因为react是通过babel来把jsx文件转换为js文件的，因此我们的安装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
4、配置webpack配置文件
由于我们要转换的源文件是index.jsx，转换后的目标文件是bundle.js，因此需要在webpack中配置入口和出口，在文本webpack.config.js中增加以下内容：
entry:__dirname+"/public/index.jsx",
output:{
path:__dirname+"/public",
filename:'bundle.js'
}
同时还要在webpack.config.js中配置loader，让其通过外部工具来处理文件，而我们当前要处理的是通过babel来处理jsx文件：
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 ,会报如下错误：
ERROR in ./public/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (9:15)
这时我们要在项目文件blog下创建babel配置文件.babelrc文件，要想babel运行必须创建它，并添加如下内容：
{
"presets": [
"react",
"es2015"
],
"env": {
"dev": {
"plugins": [
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
}
]
}
]
]
}
}
}
}
至此，再执行npm run server，页面就可以正常显示了。
网友评论