1. 前言
由于我们学习 Vue 时 Webpack 是无法绕过去的。但作为后端开发只需要了解即可，并不一定要想前端工程师一样精通。
2. 什么是 Webpack ?
官方文档：https://webpack.docschina.org/concepts/entry-points/
Webpack 是一个现代前端构建工具，用于处理 JavaScript 模块、资源文件（如样式、图片等）以及其他静态资源，将它们打包成一个或多个优化的 bundle，以提高应用的性能和可维护性。
使用拼图的例子描述如下
假设你正在组织一个庞大的拼图，每个拼图片段代表着你的应用程序的一部分，包括各种 JavaScript 代码、样式、图片和其他资源。但是他们非常混乱、难以管理和组装。Webpack 就像是一个智能的拼图整理工具。它可以将这些碎片按照你的需要整理、排序和合并。
官网图解
3. 安装 Webpack
3.1. 第一步：安装 Webpack
1
2
3
4
| > mkdir 01_webpack
> cd .\01_webpack\
> npm init -y
> npm install webpack webpack-cli --save-dev
|
1
2
3
4
| 01_webpack
|- /node_modules
|- package.json
|- package-lock.json
|
3.2. 第二步：创建配置文件
Webpack 使用配置文件来指定打包的规则和行为。
- 在根目录创建一个名为
webpack.config.js 文件
1
2
3
4
5
6
7
8
9
10
|
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
|
1
2
3
4
5
6
7
| 01_webpack
|- package.json
|- package-lock.json
+ |- /dist
+ |- /src
+ |- main.js
+ |- webpack.config.js
|
3.3. 第三步：创建入口文件
在配置文件中指定了入口文件后，你需要在项目中创建该入口文件。
1
2
|
console.log('Hello, Webpack!');
|
3.4. 第四步：安装加载器和插件
Webpack 可以使用加载器（Loaders）来处理不同类型的文件，例如将 ES6 代码转换为 ES5、处理样式文件、图片等。
1
| > npm install css-loader style-loader --save-dev
|
3.5. 第五步：配置加载器
在配置文件中，配置加载器来处理不同类型的文件。例如， CSS 加载器用于处理样式文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
|
3.6. 第六步：运行构建
使用命令行运行 Webpack，它将根据配置文件开始构建项目。
删除：”main”: “index.js”,
新增：”private”: true,
新增·：”build”: “webpack —config webpack.config.js”
我们安装包是 private（私有的），并移除 main 入口。这可以防止意外发布你的代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| {
"name": "01_webpack",
"version": "1.0.0",
"description": "",
- "main": "index.js",
+ "private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.8.1",
"style-loader": "^3.3.3",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
}
}
|
4. Webpack 配置 Vue2.X
我们基于上面的案例，设置一个基本的 Vue 项目并使用 Webpack 进行构建。
这个示例包含了一个基本的 Vue 组件、Webpack 配置以及用于开发和构建的命令。
4.1. 第一步：安装 Webpack
1
2
3
4
5
6
7
8
| > mkdir 02_webpack_vue
> cd .\02_webpack_vue\
> npm init -y
> npm install webpack@4 webpack-cli@3 --save-dev
|
1
2
3
4
| 01_webpack
|- /node_modules
|- package.json
|- package-lock.json
|
4.2. 第二步：创建组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue with Webpack!'
};
}
};
</script>
<style>
h1 {
color: blue;
}
</style>
|
1
2
3
4
5
6
7
| 01_webpack
|- /node_modules
|- package.json
|- package-lock.json
+ |- /dist
+ |- /src
+ |- App.vue
|
4.3. 第三步：创建文件入口
1
2
3
4
5
6
| import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
|
1
2
3
4
5
6
7
| 01_webpack
|- /node_modules
|- package.json
|- package-lock.json
|- /src
|- App.vue
+ |- main.js
|
4.4. 第四步：创建文件
创建 /src/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>Vue Webpack Demo</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js"></script>
</body>
</html>
|
4.5. 第五步：添加依赖
1
2
3
4
5
6
7
8
9
|
> npm install vue@2.6.14 vue-loader@15.9.8 vue-template-compiler@2.6.14 webpack-dev-server@3.11.2 html-webpack-plugin@3.2.0 css-loader@3.6.0 vue-style-loader@4.1.3 --save-dev
|
4.6. 第六步：配置加载器
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
| const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'hello vue',
template: 'index.html'
}),
new VueLoaderPlugin()
]
};
|
4.7. 第七步：运行构建
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
| {
"name": "01_webpack",
"version": "1.0.0",
"description": "",
- "main": "index.js",
+ "private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack-dev-server --open",
+ "build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.6.0",
"html-webpack-plugin": "^3.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}
|
wechat
alipay
