发布于 

使用 webpack 构建React开发环境

webpack

version: 5.17+

再构建React应用中create-react-app确实是很不错的脚手架工具,但是实际使用时却感觉没有Vue的脚手架工具好用,Vue可以使用vue ui图形化的配置直观方便。

使用create-react-app构建的React单页应用默认使用sass,而当需要使用less(我)的时候则需要通过eject暴露配置文件,这个过程时不可逆的,当然有更优雅的配置方法(create-react-app 优雅定制指南)。此处选择使用webpack从零开始配置。

项目初始化

1
2
# 选用默认配置
npm init -y

项目初始文件结构如下:

1
2
3
4
5
6
7
├─build
├─node_modules
├─public
| └─index.html
├─src
| └─index.js
└─package.json
  • 这里使用build文件夹替代webpack默认编译的dist文件夹
  • 使用public文件夹存放初始的html模板

webpack安装和基本配置

1
npm install webpack webpack-cli --save-dev

此处不建议全局安装webpack,正如官网说的:

不推荐

全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中, 可能会导致构建失败。

项目根目录下新建weback.config.json加入基础配置:

1
2
3
4
5
6
7
8
9
10
11
12
const path = require("path");
const {
resolve
} = path;

module.exports = {
entry: "./src/index.js",
output: {
path: resolve(__dirname, "build"),
filename: "[name].[hash].js"
}
};

修改package.json,添加如下内容:

添加高亮行 mark:3
1
2
3
4
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
},

src文件夹下新建index.js,随意输入一些JavaScript代码,运行npm run build查看build文件夹下是否有经过webpack打包的文件。

添加html-webpack-plugin 及配置

上面打包通过的js文件最终还是要通过html文件引入,这里使用html-webpack-plugin通过模板文件创建。项目的结构也很像create-react-app构建的项目。

1
npm install html-webpack-plugin --save-dev

webpack.config.js中添加下面内容:

html-webpack-plugin配置 mark:1,5,6,7,8,9,10,11
1
2
3
4
5
6
7
8
9
10
11
12
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
title: "My App",
template: "./public/index.html",
filename: "index.html",
})
],
}

public/index.html内容:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

添加webpack-dev-server及配置

1
npm install webpack-dev-server --save-dev

webpack.config.js中添加如下内容:

mark:3,4,5
1
2
3
4
5
6
module.exports = {
...
devServer: {
contentBase: "./build",
},
}

修改package.json,添加如下内容:

1
2
3
4
5
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack serve --open --hot --port 4027"
},

当运行npm run dev时会打开默认浏览器,访问localhost:4027端口,并且当文件发生修改时会热加载。

这是可以通过在src/index.js中添加代码后通过运行上述命令查看配置是否成功。

babel安装及配置

对于ES6语法和React的jsx语法,都是需要通过babel编译为ES5代码来执行的,所以先需要安装和配置babel。

1
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

其中babel-loader时webpack用于转换ES6或者jsx代码的插件。

根目录下新建.babelrc文件,添加如下内容:

1
2
3
4
5
6
7
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": []
}

修改webpack.config.js,添加如下内容:

mark:3,4,5,6,7,8,9,10,11
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
...
module: {
rules: [
{
test: /\.js|jsx$/i,
use: "babel-loader",
exclude: "/node_modules/"
}
],
}
}

此处排除/node_modules/文件夹,以免babel转译不必要的文件影响响应速度。

安装React及配置

React由两部分,reactreact-domreact是核心代码,而react-dom负责浏览器及DOM相关操作。

1
npm install react react-dom --save

清空前面src/index.js文件中的内容,添加如下内容,测试React是否正常安装。

1
2
3
4
5
6
7
8
import React from 'react'
import ReactDOM from 'react-dom'

function App() {
return <div>It works</div>
}

ReactDOM.render(<App />, document.getElementById('app'))

这里的document.getElementById('app')对应模板html文件中的<div id="app"></div>

通过npm run dev,打开浏览器,应该就能看到It works
Works

添加less支持

手动配置很大一部分原因是不想使用eject的方式添加对less的支持,所以此处添加对less的支持。

1
2
npm install less --save
npm install less-loader style-loader css-loader --save-dev

webpack 是先将 less 转换为 css,然后使用<style></style>将样式插入DOM。
webpack.config.js中添加如下内容:

mark:5,6,7,8,9,10,11,12,13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
...
module: {
rules: [
{
test: /\.less$/i,
use: ['style-loader', 'css-loader?modules', 'less-loader'],
exclude: "/node_modules/"
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader?modules']
}
],
}
}

src目录下创建一个样式文件,可以是less,也可以是css,将其引入刚才的index.js文件中,看看是否生效。

其他优化配置

添加静态资源的支持

虽然官方文档说webpack已经内置Asset Modules,但是使用下来并不太满意(可能是姿势不对:no_mouth:),所以改用file-loader

1
npm install file-loader --save-dev

在上面反复修改过的webpack.config.js中加入如下内容,和上面less还有jsx类似:

mark:5,6,7,8
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
...
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
use: "file-loader"
}
],
}
}

可以尝试在src/index.js中加入一个图片,看看是否配置成功,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'
import ReactDOM from 'react-dom'

import avatar from './assets/images/avatar.jpg'

function App(){
return <div><p>It works,Yeah</p><div align="center"><img src={avatar} /></div></div>
}

ReactDOM.render(
<App/>,
document.getElementById('app')
)

重新运行npm run dev,查看图片是否生效。

清理build文件夹

每次重新运行npm run build 后,删除build文件夹中旧文件。

1
npm install clean-webpack-plugin --save-dev

webpack.config.js中插件部分加入下面内容:

mask:1,6
1
2
3
4
5
6
7
8
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
...
plugins: [
new CleanWebpackPlugin(),
]
};

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

本站由 @Harogo 创建,使用 Stellar 作为主题。