創建一個空的項目
mkdir init-react 創建 init-react 文件夾
cd init-react 前往 init-react 文件夾
npm init 生成package.json
接下來就可以一步步來創建一個webpack4+react的項目了
生成一個簡單的react頁面，並且通過webpack4，運行起來
生成index.html文件
init-react
安裝react react-dom webpack
yarn add react react-dom
yarn add webpack -D
創建src文件夾，在src文件下創建index.js，這是一個入口文件，並且添加App.js寫第一個react componet
// src/index.js
import React from "react";
import ReactDom from "react-dom";
import App from "./App"; //引入src/app.js
ReactDom.render( , document.getElementById("app"))
// src/App.js
import React from 'react'
const App = () => {
return(
i am app view
)
}
export default App;
接下來，就要使用webpack4打包這個文件了,並且運行起來
首先我們先安裝一下，我們接下來要使用的一些依賴
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react -D
首先webpack需要一個配置文件，我們在主目錄下生成一個webpack.config.js
// webpack.config.js
const webpack = require("webpack");
const path = require("path"); // nodejs的模塊 path
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 在我們再次打包文件時，需要清除上次留存的文件，需要用到clean-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development", // mode 分為 development production
entry: ["./src/index.js"], // 入口文件
output: {
path: path.join(__dirname, "dist"), // 輸入目錄
filename: "bundle.js" // 文件名稱
},
optimization: {
splitChunks: {
chunks: "all" // 所有的chunks 代碼公共的部分 分離出來成為一個獨立的文件
}
},
resolve: {
extensions: [".js", ".jsx"] // 自動解析確定的擴展，省去你引入組件寫後綴的麻煩
},
module: {
// 編譯規則
rules: [
// 也就是以前的loader
{
test: /\.jsx?$/, // 正則表達式，匹配編譯的文件
exclude: /node_modules/, // 排除特定條件，如通常會寫node_modules，即把某些目錄/文件過濾掉
use: [
{
loader: "babel-loader" // loader 必需要有它，它相當於是一個test匹配到的文件對應的解析起，babel-loader、style-loader、sass-loader等等
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(), // clean-webpack-plugin的基本用法
new HtmlWebpackPlugin({
filename: "index.html", // 最終生成的文件名
template: path.join(__dirname, "index.html")
})
],
devServer: {
hot: true, // 熱更新
contentBase: path.join(__dirname, "./dist"), // 需要啟動的文件名
host: "0.0.0.0", // 可以使用手機訪問
port: 8080, // 端口,
historyApiFallback: true, // 該選項的作用所有的404都鏈接到index.html
proxy: {
// 代碼到後端的服務地址，會攔截所有以api開頭的請求地址
api: "http://localhost:3000"
}
}
};
接下來，我們需要創建.babelrc 文件，.babelrc就是babel的配置文件，類似於ESLint(.eslintrc)。
// .babelrc
{
"presets": [["@babel/preset-env"], "@babel/preset-react"]
}
所有文件編寫完成後，需要在package.json中，配置一下我們的啟動命令
// package.json
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js --color --propgress" // 添加這一行
},
最終在我們的命令行輸入 yarn run dev，沒有輸出錯誤後，打開瀏覽器，輸入網站http://localhost:8080/就可以看到 i am app view了。
