创建一个新的 Vue 项目
1)初始化项目目录
新建一个文件夹,或者使用以下指令
bash
mkdir webpack-vue_demo
cd webpack-vue_demo
2)初始化 npm 项目
csharp
npm init -y
3)安装 vue 和 webpack 相关依赖
arduino
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server --save
如果需要支持 ES6+ 语法,还需要安装相应的 Babel 依赖:
sql
npm install @babel/core @babel/preset-env babel-loader --save-dev
安装完成后,package.json 文件中会包含这些依赖

设置项目结构
PS:以下文件均使用 Vue3 语法
1)创建项目文件
在 node_modules 同级创建 src 文件夹,src 里面创建 main.js、App.vue、index.html

2)编写简单的 vue 组件(src/App.vue)
xml
<template>
<div id="app">
<img alt="Vue logo" src="./assets/green.png">
<h1>{{ message }}</h1>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}
</script>
<style>
#app {
max-width: 300px;
margin: auto;
}
</style>
3)编写入口文件(src/main.js)
javascript
import { createApp } from 'vue'
import App from './App.vue'
import './assets/green.png'
createApp(App).mount('#app')
4)创建 html 模板(src/index.html)
<script src="/bundle.js"></script>
:告诉浏览器从服务器加载并执行bundle.js
文件,这个文件是 Webpack 打包应用后生成的,包含了整个应用代码。在开发过程中,Webpack Dev Server 会提供这个文件。
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>
配置 Webpack
1)创建 Webpack 配置文件
与 package.json 同级创建 webpack.config.js,有些依赖还未安装的需要安装,比如 vue-style-loader、css-loader
css
npm install vue-style-loader css-loader --save-dev
javascript
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: './src/main.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: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}
]
},
plugins: [
new VueLoaderPlugin()
],
devServer: {
static: {
directory: path.resolve(__dirname, 'src'), // 从src提供静态文件
},
}
}
2)添加构建和开发脚本
在 package.json 文件的 scripts 中添加:
json
"scripts": {
"build": "webpack --mode production",
"dev": "webpack serve --mode development"
},

运行和构建项目
1)运行项目
arduino
npm run dev
运行成功如下图所示,通过访问地址即可看见页面

2)构建项目
arduino
npm run build
构建成功后会生成 dist:
