《React+Redux前端开发实战》笔记2：基于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，我们让其打印简单的一句：

console.log('Hello World’);

（5）用终端在根目录下执行：

./node_modules/.bin/webpack -d

上面的命令在开发环境运行之后，会在根目录下生成一个新的build文件夹，里面包含了Webpack打包的bundle.js文件。

（6）接下来创建index.html，用于在浏览器执行bundle.js ：

<!DOCTYPE html><html lang="en"><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和ES6语法在浏览器中还没有被完全支持，所以需要在Webpack中配置相应的loader模块来编译它们。只有这样，打包出来的bundle.js文件才能被浏览器识别和运行。

接下来安装Babel：

npm i -D babel-core babel-loader@ 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文件：