平时都是用命令行工具一键生成项目,没有机会使用webpack从头到尾搭建项目。
经过几天的学习,决定用webpack搭建一个React项目,并将搭建过程记录下来,与大家一起交流分享。菜鸡一枚,如果那里有错误,希望大家帮忙指出。
本篇文章会被分成三章,每一章都有一个主题。
第一章 搭建项目雏形
项目结构
代码
初始化项目
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");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 设置为生产(production)模式
// 生产模式默认会将js代码压缩
// 如果你好奇打包后的文件长什么样
// 可以将mode设置为"development",将devtool设为"none"
mode: "production",
// 设置入口文件
entry: "./src/index.js",
output: {
// 设置出口文件名
filename: "main.js",
// 设置出口文件的目录
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
resolve: {
// 设置扩展,这样导入文件时可以省去写扩展名
extensions: [".js", ".json", ".jsx"]
},
module: {
rules: [
{
// 对".js"或".jsx"结尾的文件使用babel-loader进行转译
// babel-loader的配置放到".babelrc"文件内
test: /\.jsx?$/,
use: "babel-loader"
},
{
// 对css文件先后使用css-loader和style-loader
// css-loader可以将导入项目的css变为js模块
// style-loader可以让页面打开时,利用js将css模块
// 内的样式注入到html头部的style标签内
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
// 使用file-loader来加载图片文件
test: /\.(png|jpg|jpeg|svg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
// 该插件能将生成的入口js文件注入到模板html内
new HtmlWebpackPlugin({
// 设置模板的路径
template: "./src/template.html",
// 设置favicon的路径
favicon: "./src/assets/favicon-32x32-next.png"
})
]
};
配置.babelrc
我们需要配置.babelrc
文件,来告诉babel我们要使用的presets。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
配置npm脚本
在npm内添加以下脚本,方便开发使用
// ...
"scripts": {
"build": "webpack --config webpack.config.js",
"serve:dist": "npx http-server-spa ./dist"
}
// ...
使用 npm run build
,打包项目。使用npm run serve:dist
,将打包后的文件跑起来。
结尾
一个简单的webpack配置完成了。
安装react和react-dom就可以开始写代码了。
npm i react react-dom
下一章节内容:将配置文件拆分为webpack.common.js
webpack.dev.js
webpack.prod.js
来针对不同的场景;使用webpack-dev-server
启动开发服务器;优化生产环境的打包文件。