參考自：
https://www.html.cn/archives/9427
創建項目
第一步：安裝，如果安裝失敗或者報警，可以嘗試更換npm registry的地址，比如設置爲淘寶源或者你所在公司可以翻牆的源。npm config set registry="https://"
npm i -g create-react-app
第二步：創建項目，並進入
create-react-app my-app
cd my-app
//推薦下面每個都試着運行下
yarn start
yarn build
yarn eject
其中最後的yarn eject會使得隱藏的webpack.config.js文件出現在文件夾config裏面。
設置Babel
react components(組件) 大多是用 JavaScript ES6 編寫的。
由於瀏覽器無法理解 React 組件，因此需要進行某種轉換。
Webpack 不知道如何進行轉換，但它具有 loaders(加載器) 的概念：將它們視爲轉換器。
Webpack loaders(加載器) 將某些內容作爲輸入並生成其他內容作爲輸出。
babel-loader 是 Webpack 加載器，負責接收 ES6 代碼並使其可以讓所選擇的瀏覽器理解。
很明顯 babel-loader 使用 Babel。 並且 Babel 必須配置爲使用一組預設：
babel-preset-env 用於將 JavaScript ES6 代碼編譯爲 ES5（請注意，babel-preset-es2015現已棄用）
babel-preset-react 用於將 JSX 和其他東西編譯到 JavaScript
要開始使用 loader ，我們需要安裝一堆依賴項。 尤其是：
- babel-core
- babel-loader
babel-preset-env 用於將 Javascript ES6 代碼編譯爲 ES5
我們開始動手吧：
CommandLine 代碼:
npm i babel-core babel-loader babel-preset-env --save-dev
接下來，通過在項目文件夾中創建名爲 .babelrc 的新文件來配置 Babel ：
.babelrc 代碼:
{
"presets": [
"env"
]
}
此時我們有2個配置 babel-loader 的選項：
使用 webpack 的配置文件
在你的 npm scripts 中使用 --module-bind
給 webpack 添加一個配置文件，以最經典的方式使用 babel-loader。
創建一個名爲 webpack.config.js 的新文件並配置 loader(加載器) ：
webpack.config.js 代碼:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
除非您要自定義 entry point(入口點) ，否則無需指定它。
接下來打開 ./src/index.js 並編寫一些 ES6 代碼：
index.js 代碼:
const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;
最後，創建 bundle(包)：
CommandLine 代碼:
npm run build
現在看一下 ./dist/main.js 來查看轉換後的代碼。
此時我們已準備好定義最小的webpack配置。
創建一個名爲 webpack.config.js 的文件，寫入以下內容：
webpack.config.js 代碼:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
配置非常簡單。
對於每個擴展名爲 .js 的文件，Webpack 都會通過 babel-loader 來管理代碼，將 ES6 轉換爲 ES5 。
有了這個，我們就可以編寫我們的 React 組件了。
編寫react
一旦你安裝並配置了 babel ，這裏就很容易了。
安裝 React ：
CommandLine 代碼:
npm i react react-dom --save-dev
接下來添加 babel-preset-react ：
CommandLine 代碼:
npm i @babel/preset-react --save-dev
在 .babelrc 中配置預設：
.babelrc 代碼:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
很快就完成了！
根據 Conner Aiken 的建議，您可以配置 babel-loader 來讀取 .jsx 文件。 如果你的 React 組件 正在使用 jsx 擴展，這將非常有用。
打開 webpack.config.js 並像這樣配置 loader(加載器) ：
webpack.config.js 代碼:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
要測試一下你可以在 ./src/App.js 中創建一個測試的 React 組件：
App.js 代碼:
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
接下來在 ./src/index.js 中 import(導入) 組件：
index.js 代碼:
import App from "./App";
然後再次運行構建 npm run build
HTML webpack 插件
webpack 需要兩個額外的組件來處理HTML：html-webpack-plugin 和 html-loader。
添加依賴項：
CommandLine 代碼:
npm i html-webpack-plugin html-loader --save-dev
然後更新 webpack 配置：
webpack.config.js 代碼:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
接下來在 ./src/index.html 中創建一個 HTML 文件：
index.html 代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
然後再次運行構建：
CommandLine 代碼:
npm run build
並查看 ./dist 文件夾。 您應該看到生成的 HTML 。
沒有必要在 HTML 文件中引入您的 Javascript ：bundle(包) 會自動注入。
在瀏覽器中打開 ./dist/index.html ：您應該看到 React 組件正常工作！
正如您所看到的，在處理 HTML 方面沒有任何改變。
webpack 4 仍然是一個針對 Javascript 的模塊打包器。
但是有計劃將 HTML 添加爲模塊（HTML作爲 entry point(入口點)）。
webpack 4：將 CSS 提取到一個文件中
webpack 不知道如何將 CSS 提取到一個文件中。
在過去，這是 extract-text-webpack-plugin 的工作。不幸的是，這個插件與 webpack 4 不太兼容。根據 Michael Ciniawsky 的說法：extract-text-webpack-plugin 的維護已經成爲了一個很大的負擔，這已經不是第一次因爲它的問題，而使升級 webpack 主版本變的而複雜和繁瑣
mini-css-extract-plugin 可以解決這些問題。
注意：確保將 webpack 更新到 4.2.0 版。 否則 mini-css-extract-plugin 將無效！
使用以下命令安裝該插件和 css-loader ：
CommandLine 代碼:
npm i mini-css-extract-plugin css-loader --save-dev
接下來創建一個用於測試的 CSS 文件：
css 代碼:
/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
}
配置插件和 loader(加載器)：
webpack.config.js 代碼:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
最後在 entry point(入口點) import(導入) CSS：
index.js 代碼:
//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";
然後再次運行構建：
CommandLine 代碼:
npm run build
並查看 ./dist 文件夾。你應該看到生成的CSS！
回顧一下：extract-text-webpack-plugin 不適用於webpack 4 。請改用 mini-css-extract-plugin 代替。
webpack 4：webpack dev server
使用 webpack 配置開發服務器只需一分鐘。
配置好的 webpack dev server 將在瀏覽器中啓動您的應用程序。
每次更改文件時，它都會自動刷新瀏覽器的窗口。
要設置 webpack dev server，請安裝包：
CommandLine 代碼:
npm i webpack-dev-server --save-dev
接下來打開 package.json 並調整 scripts ，如下所示：
package.json 代碼:
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
保存並關閉文件。
現在，通過運行以下命令：
CommandLine 代碼:
npm run start
你會看到 webpack dev server 在瀏覽器中啓動你的應用程序。
webpack dev server 非常適合開發。 （它也可以使 React Dev Tools 在您的瀏覽器中正常工作）。