動手搭建一個基於Webpack的Hello World應用。這次搭建分為兩部分：一部分是前期必要配置，一部分是開發React代碼。 ...
這次搭建分為兩部分：一部分是前期必要配置，一部分是開發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@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使用ES6和JSX插件：
{ "presets" : ["env", "react"] }
至此為止，已經配置完開發該項目的基礎工作。
《海賊王》中羅傑說，每個人都有自己出場的機會！在將來，React可能會在前端歷史的浪潮中被人遺忘，但今天，React的設計思想影響了無數的開發者，當下正是屬於它的時代！！
