使用webpack4一步步搭建react项目（一）

平时都是用命令行工具一键生成项目，没有机会使用webpack从头到尾搭建项目。

经过几天的学习，决定用webpack搭建一个React项目，并将搭建过程记录下来，与大家一起交流分享。菜鸡一枚，如果那里有错误，希望大家帮忙指出。

本篇文章会被分成三章，每一章都有一个主题。

第一章 搭建项目雏形

项目结构

代码

项目代码 Github 仓库

初始化项目

mkdir diy-webpack-for-react
cd diy-webpack-for-react
npm init -y

添加.gitignore文件

node_modules
/dist

.idea
.vscode

初始化git仓库

git init

安装webpack

npm i webpack webpack-cli -D

配置webpack.config.js

配置思路

• 配置入口（entry）
• 配置输出（output）
• 配置各种资源加载的loader
• 使用HtmlWebpackPlugin将打包后的js入口文件的脚本注入到html模板中

安装依赖

• babel-loader @babel/core @babel/preset-env @babel/preset-react
• style-loader css-loader
• url-loader
• html-webpack-plugin

webpack.config.js代码

const path = require("path");