1. 为什么选择 React/Vue来实践 ？
React 和 Vue 是现代前端开发中最流行的框架之一，但它们本身并不提供构建工具。Webpack 可以帮助我们：
- 打包项目资源：将 JavaScript、CSS、图片等资源打包成静态文件。
- 支持模块化开发：使用 ES Module 或 CommonJS 组织代码。
- 优化项目性能：通过代码分割、懒加载等手段提升页面加载速度。
- 集成开发工具：支持热更新、Source Map 等功能，提升开发体验。
本文将介绍如何使用 Webpack 构建 React 和 Vue 项目。
2. 构建 React 项目
2.1 初始化项目
创建一个新的项目目录，并初始化 package.json：
1
2
3
| mkdir react-webpack-demo
cd react-webpack-demo
npm init -y
|
2.2 安装依赖
安装 React 和 Webpack 相关依赖：
1
2
3
4
| npm install react react-dom
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
npm install css-loader style-loader --save-dev
|
2.3 配置 Webpack
在项目根目录下创建 webpack.config.js：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: './dist',
hot: true
}
};
|
2.4 配置 Babel
在项目根目录下创建 .babelrc：
1
2
3
| {
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
|
2.5 编写 React 代码
src/index.html
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Webpack Demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
|
src/index.js
1
2
3
4
5
| import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
|
src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
| import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello, React with Webpack!</h1>
</div>
);
}
export default App;
|
src/App.css
1
2
3
4
| .App {
text-align: center;
margin-top: 50px;
}
|
2.6 运行项目
在 package.json 中添加脚本：
1
2
3
4
5
6
| {
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
}
}
|
运行开发服务器：
构建生产环境代码：
3. 构建 Vue 项目
3.1 初始化项目
创建一个新的项目目录，并初始化 package.json：
1
2
3
| mkdir vue-webpack-demo
cd vue-webpack-demo
npm init -y
|
3.2 安装依赖
安装 Vue 和 Webpack 相关依赖：
1
2
3
4
5
| npm install vue
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install vue-loader vue-template-compiler --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install css-loader style-loader --save-dev
|
3.3 配置 Webpack
在项目根目录下创建 webpack.config.js：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: './dist',
hot: true
}
};
|
3.4 编写 Vue 代码
src/index.html
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Webpack Demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
src/index.js
1
2
3
4
5
6
| import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
|
src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<div class="App">
<h1>Hello, Vue with Webpack!</h1>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
.App {
text-align: center;
margin-top: 50px;
}
</style>
|
3.5 运行项目
在 package.json 中添加脚本：
1
2
3
4
5
6
| {
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
}
}
|
运行开发服务器：
构建生产环境代码：
4. 总结
本文详细介绍了如何使用 Webpack 构建 React 和 Vue 项目，包括配置 Webpack、编写代码以及运行项目。通过这些步骤，你可以快速搭建一个现代化的前端项目。
在下一篇文章中，我们将深入探讨 Webpack 的更多实战应用，学习如何构建多页面应用和 Library。
预告：
- 下一篇：Webpack 实战应用：构建多页面应用与 Library
