文章目录
- 前言
- Vue 相关包：
- 项目搭建
- 1. 初始化项目
- 2. 安装 Vue 和 Webpack
- 3. 创建目录结构
- 4. 创建文件项目
- 5. 配置 Webpack
- 6. 配置 Babel
- 7. package.json
- 8. 打包和运行
前言
基于 上一篇 webpack 的配置详解 ，我们已经知道了 webpack 在项目中的常用的配置和模块，这篇文章我们将使用 Webpack 来打包一个 Vue 项目，从实战出发，我们主要介绍一些 webpack 的特性在项目中怎么去使用，不会涉及太多 Vue 相关的知识及 Vue 项目的优化
本文分两部分来介绍：
第一部分：将先介绍 webpack 打包 Vue 需要用到的 Vue 相关包，然后配置项目目录及必要文件，最后配置 webpack.config.js，运行项目
第二部分：探索 cdn、分包、tree Shaking、已经热更新的使用`
Vue 相关包：
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它由核心库和一系列生态系统包组成，每个包都有其特定的功能。
我只列举了本文需要用到包，不代表全部
-
vue:
- 功能: Vue 核心库，提供了响应式数据绑定和组件系统。
- 用途: 用于创建应用程序的视图层。
-
vue-template-compiler:
- 功能: Vue 模板编译器，用于将 Vue 模板编译成渲染函数。
- 用途: 在构建过程中使用，通常在运行时不需要。
-
vue-loader:
- 功能: webpack 加载器，用于处理
.vue文件，将模板、脚本和样式分别处理并最终打包成一个 JavaScript 模块。 - 用途: 在使用 webpack 构建 Vue 应用时使用。
- 功能: webpack 加载器，用于处理
-
vue-router:
- 功能: Vue 官方的路由管理器。
- 用途: 用于构建单页面应用（SPA），管理应用的路由和视图。
项目搭建
1. 初始化项目
首先，你需要创建一个新的项目目录，并初始化一个 npm 项目：
mkdir webpack-vue2 && cd webpack-vue2
npm init -y
2. 安装 Vue 和 Webpack
接下来，安装 Vue 和 Webpack 相关的依赖：
pnpm i vue@2.6.10 webpack@4.47.0 webpack-cli@4.10.0 vue-router@3
pnpm i vue-loader vue-template-compiler@2.6.10 css-loader vue-style-loader -D
pnpm i babel-core babel-loader babel-preset-env html-webpack-plugin@4 webpack-dev-server@3 -D
3. 创建目录结构
├── dist
| ├── bundle.js
| └── index.html
├── package.json
├── pnpm-lock.yaml
├── src
| ├── App.vue
| ├── index.html
| ├── main.js
| ├── router.js
| └── views
├── webpack.config.js
└── yarn.lock
4. 创建文件项目
在src目录下创建一个main.js文件，作为项目的入口文件：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
render: (h) => h(App),
router,
}).$mount("#app");
在src目录下创建一个router.js文件：
import Vue from "vue";
import VueRouter from "vue-router";
import Hello from "./views/Hello.vue";
import List from "./views/List.vue";
Vue.use(VueRouter);
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const routes = [
{
path: "/",
component: Hello,
},
{
path: "/hello",
component: Hello,
},
{
path: "/list",
component: List,
},
];
const router = new VueRouter({
mode: "hash",
routes,
});
export default router;
在src目录下创建一个App.vue文件：
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/hello">Hello 页面</router-link>
<router-link to="/list">List 页面</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {}
},
};
</script>
<style></style>
在src/views目录下创建一个Hello.vue文件：
<template>
<div>
<input v-model="message" />
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name:'Hello',
data() {
return {
message: "Hello Vue!",
};
},
};
</script>
在src/views目录下创建一个List.vue文件：
<template>
<div>
<h3>前端三大框架:</h3>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name:'List',
data() {
return {
list: ["Vue", "React", "Angular"],
};
},
};
</script>
在src目录下创建一个index.html文件，作为项目的入口文件：
<!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>
5. 配置 Webpack
在项目根目录下创建一个webpack.config.js文件，配置 Webpack：
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
},
{
test: /\.js$/,
use: {
loader: "babel-loader",
},
},
],
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
vue$: "vue/dist/vue.esm.js", // 确保使用vue的ES模块
},
extensions: ["*", ".js", ".vue", ".json"],
},
devServer: {
contentBase: "dist",
host: "localhost",
port: "8088",
open: true,
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: "vuew + webpack",
template: "./src/index.html",
}),
],
};
6. 配置 Babel
创建一个.babelrc文件来配置 Babel：
{
"presets": [
[
"env",
{
"targets": {
"node": "current" // 根据当前节点版本进行编译
}
}
]
]
}
7. package.json
{
"scripts": {
"serve": "webpack-dev-server",
"build": "webpack"
},
"dependencies": {
"vue": "2.6.10",
"vue-router": "3"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "4",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
8. 打包和运行
pnpm serve // 运行
pnpm build // 打包
