前言
工欲善其事,必先利其器。为了更好的学习React,我们先简要的把开发环境搭建起来。本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习。
-
基础环境
node/npm
-
webpack
现代JavaScript程序应用的模块打包器。它主要分析你的项目结构,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言(Scss、less、TypeScript),将其转换和打包为合适的格式供浏览器使用。
-
项目创建
创建一个文件夹first-react,进入该目录,在该目录下打开一个终端,执行npm init。根据提示输入内容,也可以直接按回车键跳过。执行完后目录中会多一个package.json文件,这是项目的核心文件,包含包依赖管理和脚本任务。
mkdir first-react
cd first-react
npm init
-
安装react, react-dom, webpack
在项目根目录下执行下面命令,其中--save的含义是项目上线运行所需的包,即生产环境(--save-dev是开发环境所需的包)。
npm install react react-dom --save
npm install webpack --save-dev
-
项目目录和源码
1 2 3 4 5 6 7 8 9 |
|
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
/* react DOM*/
</div>
<script src="bundle.js"></script>
</body>
</html>
index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
render(
<div>Hello React!</div>,
document.getElementById('app')
);
webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件,程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
output: {
path: path.resolve(__dirname, '../dist'), // 输出的路径
filename: 'bundle.js' // 打包后文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
}
},
exclude: /node_modules/
}
]
}
}
这里如果在项目根目录直接进行webpack构建会报错(构建命令:webpack --config webpack/webpack.config.js),因为我们使用了react,react是使用jsx语法实现的,而jsx不能直接被浏览器识别和执行,所以这里需要引入Babel库进行转码。
1 |
|
babel-loader: babel加载器
babel-preset-es2015: 支持es2015
babel-preset-react: jsx 转换成js
最后再次进行构建,然后点击build/index.html,即可看到Hello React!
webpack --config webpack/webpack.config.js // 更多webpack命令尽在webpack --help查阅
接下来我们进行一下简单的优化,执行效果一致。
index.js
import React from 'react';
import { render } from 'react-dom';
import App from './App'
const renderDom = Component => {
render(
<Component />,
document.getElementById('app')
);
}
renderDom(App);
在项目根目录下新建json文件.babelrc,将babel的配置单独提取出来。
1 2 3 4 5 6 |
|
webpack.config.js文件作相应的调整。
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件,程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
output: {
path: path.resolve(__dirname, '../dist'), // 输出的路径
filename: 'bundle.js' // 打包后文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
在src下新建App.js。
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>Hello React!</div>
);
}
}
-
以脚本方式执行构建
编辑package.json,加入自定义脚本,在项目根目录执行npm run dev即可达到上面一样的效果。
1 2 3 |
|
-
搭建前端服务器
可以发现,每次都要重新构建然后刷新index.html,才能得到最新的效果,开发效率极低。幸好webpack-dev-server可以帮助我们解决这个问题,webpack-dev-server是一个小型的静态文件服务器,为webpack打包的资源文件提供Web服务。并且提供自动刷新和Hot Module Replacement(模块热替换:前端代码变动后无需刷新整个页面,只把变化的部分替换掉)。OK,让我们开始安装和配置webpack-dev-server。
1 |
|
在项目根目录下创建bin目录,进入bin目录,创建dev-server.js文件,编辑如下
'use strict'
const WebpackDevServer = require('webpack-dev-server');
const config = require('../webpack/webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器,这里指定文件夹
historyApiFallback: true, //在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
port: 9090, //如果省略,默认8080
publicPath: "/"
});
server.listen(9090, 'localhost', function (err) {
if (err) throw err
})
编辑package.json,创建一条脚本
1 2 3 |
|
最后,单独在该项目根目录起一个终端,执行npm run dev,启动成功后访问http://localhost:9090。如果看到Hello React!,恭喜你。 最后再做一下简单的测试,将App.js修改如下后保存,可以发现,项目会自动重新编译运行,刷新浏览器即可看到最新的更改。
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>
<h1>Hello React</h1>
<h2>Hello React</h2>
</div>
);
}
}
-
Html-webpack-plugin
删除根目录下dist目录,刚刚我们是自己编写和配置index.html,将打包后的js引入到index.html中。现删除后启动服务会报错,现在我们使用插件实现自动引入,免去手工配置,安装html-webpack-plugin。
1 |
|
在src目录新建index.template.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
编辑webpack.config.js。最后重新启动服务即可。若是想看打包后的文件可以打开chorme,在Sources即可看见。或者使用webpack --config webpack/webpack.config.js进行构建,在项目目录的dist目录查看。
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件,程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
output: {
path: path.resolve(__dirname, '../dist'), // 输出的路径
filename: 'app/[name]_[hash:8].js' // 打包后文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.template.html'),
inject: true
})
]
}