《React+Redux前端开发实战》—1.5.2 基于Webpack的Hello World
1.5.2 基于Webpack的Hello World
真实项目中一般不会像1.5.1节介绍的这样来搭建项目，有了前面小节中的基础知识，接下来开始动手搭建一个基于Webpack的Hello World应用。这次搭建分为两部分：一部分是前期必要配置，另一部分是开发React代码。
基于Webpack的React Hello World项目示例：
1．前期必要配置
（1）首先要确保读者的开发设备上已经安装过Node.js，新建一个项目：
mkdir react-hello-world
cd react-hello-world
npm init -y
（2）项目中使用的是Webpack 4.x，在项目根目录下执行如下命令：
npm i webpack webpack-cli -D
注意：上面命令代码中npm install module_name -D 即 npm intsll module_name —save-dev。表示写入package.json的devDependencies。devDependencies里面的插件用于开发环境，不用于生产环境。npm install module_name —S即npm intsll module_name —save。dependencies是需要发布到生产环境的。
（3）安装完Webpack，需要有一个配置文件让Webpack知道要做什么事，这个文件取名为webpack.config.js。
touch webpack.config.js
然后配置内容如下：
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');
var config = {
entry: APP_DIR + '/index.jsx', // 入口
output: {
path: BUILD_DIR, // 出口路径
filename: 'bundle.js' // 出口文件名
}
};
module.exports = config;
这是Webpack使用中最简单的配置，只包含了打包的入口和出口。APP_DIR表示当前项目的入口路径，BUILD_DIR表示当前项目打包后的输出路径。
（4）上面配置的入口需要新建一个应用的入口文件./src/index.jsx，我们让其打印Hello World：
console.log('Hello World');
（5）用终端在根目录下执行：
./node_modules/.bin/webpack -d
上面的命令在开发环境运行之后，会在根目录下生成一个新的build文件夹，里面包含了Webpack打包的bundle.js文件。
（6）接下来创建index.html，用于在浏览器中执行bundle.js ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<!--bundle.js是Webpack打包后生成的文件-->
<script src="build/bundle.js" type="text/javascript"></script>
</body>
</html>
在浏览器中打开index.html文件，在控制台就能看到./src/index.jsx打印的内容：Hello World 。
（7）为了提高效率和使用最新的ES语法，通常使用JSX和ES 6进行开发。但JSX和ES 6语法在浏览器中还没有被完全支持，所以需要在Webpack中配置相应的loader模块来编译它们。只有这样，打包出来的bundle.js文件才能被浏览器识别和运行。
接下来安装Babel：
npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react
注意：babel-core是调用Babel的API进行转码的包；babel-loader是执行转义的核心包；babel-preset-env是一个新的preset，可以根据配置的目标运行环境自动启用需要的Babel插件；babel-preset-react用于转译React的JSX语法。
（8）在webpack.config.js中配置loader：
var webpack = require("webpack");
var path = require("path");
var BUILD_DIR = path.resolve(__dirname, "build"); // 构建路径
var APP_DIR = path.resolve(__dirname, "src"); // 项目路径
var config = {
entry: APP_DIR + "/index.jsx", // 项目入口
output: {
path: BUILD_DIR, // 输出路由
filename: "bundle.js" // 输出文件命名
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // 编译后缀为js和jsx格式文件
exclude: /node_modules/,
use: {
loader: "babel-loader" // 使用babel-loader这个loader库
}
}
]
}
};
module.exports = config;
（9）创建.babelrc文件：
touch .babelrc
配置相应内容来告诉babel-loader使用ES 6和JSX插件：
{
"presets" : ["env", "react"]
}
至此为止，已经完成开发该项目的基础配置工作。
2．使用React编码
下面正式开始使用React来编写前端代码。
（1）用NPM命令安装react和react-dom：
npm install react react-dom -S
（2）用下面代码替换./src/index.jsx中的console：
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React</p>;
}
}
render(<App/>, document.getElementById('app'));
（3）在根目录下执行：
./node_modules/.bin/webpack -d
在浏览器中打开index.html，将会在页面展示Hello World。当然真实开发中不能每一次修改前端代码就执行一次Webpack编译打包，可以执行如下命令来监听文件变化：
./node_modules/.bin/webpack -d —-watch
终端将会显示：
myfirstapp Jack$ ./node_modules/.bin/webpack -d --watch
webpack is watching the files…
Hash: 6dbf97954b511aa86515
Version: webpack 4.22.0
Time: 839ms
Built at: 2018-10-23 19:05:01
Asset Size Chunks Chunk Names
bundle.js 1.87 MiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.jsx] 2.22 KiB {main} [built]
+ 11 hidden modules
这就是Webpack的监听模式，一旦项目中的文件有改动，就会自动执行Webpack编译命令。不过浏览器上展示的HTML文件不会主动刷新，需要手动刷新浏览器。如果想实现浏览器自动刷新，可以使用react-hot-loader（源码地址https://github.com/gaearon/react- hot-loader）。
（4）在真实的项目开发中，一般使用NPM执行./node_modules/.bin/webpack -d --watch命令来开发。这需要在package.json中进行如下配置：
{
...
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}
（5）现在只需要在根目录下执行如下命令就能开发与构建：
npm run dev
npm run build
以上为真实项目中一个较为完整的项目结构，读者可以在此基础上根据项目需要自行拓展其他功能。本例源码地址为https://github.com/khno/react-hello-world，分支为master。项目完整的结构如下：
.
├── build
│ └── bundle.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ └── index.jsx
├── .gitignore
├── .babelrc
└── webpack.config.js
- 点赞
- 收藏
- 关注作者
评论（0）