Webpack 搭建 Vue3 脚手架详细步骤
创建一个新的 Vue 项目
1）初始化项目目录
新建一个文件夹，或者使用以下指令
mkdir webpack-vue_demo
cd webpack-vue_demo
2）初始化 npm 项目
npm init -y
3）安装 vue 和 webpack 相关依赖
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server --save
如果需要支持 ES6+ 语法，还需要安装相应的 Babel 依赖：
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）
<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）
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 会提供这个文件。
<!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
npm install vue-style-loader css-loader --save-dev
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 中添加：
"scripts": {"build": "webpack --mode production","dev": "webpack serve --mode development"},
运行和构建项目
1）运行项目
npm run dev
运行成功如下图所示，通过访问地址即可看见页面
2）构建项目
npm run build
构建成功后会生成 dist：
