Vue 2.7+Webpack 5.88搭建项目
一、创建项目
mkdir vue-demo
cd vue-demo
二、初始化项目
生成package.json文件
npm init
三、引入webpack
npm install webpack --save-dev
项目根目录新增webpack.config.js文件：
const path = require('path')
module.exports = {
entry:'./src/main.js', //指定入口文件路径，表示Webpack将从该文件开始构建应用程序
output: {//指定输出文件的路径和文件名，
path: path.resolve(__dirname,'dist'),//表示输出文件的路径将是当前目录下的dist文件夹
filename: "demo.js"//输出文件的名称为demo.js
}
}
四、创建入口文件
项目根目录 新增index.html内容为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-webpack-demo</title>
</head>
<body>
<script src="./dist/demo.js"></script>
</body>
</html>
根目录新增src文件夹，src文件夹下创建main.js文件
alert('hello world');
五、webpack编译
终端执行webpack
若是报错，可参考：stackoverflow.com/questions/3…
zsh: command not found: webpack
修改package.json文件内容为
执行npm start，可能报错
按照报错提示，执行 npm install -D webpack-cli，安装webpack-cli。再次npm start，生成dist文件夹包含demo.js文件
六、引入Vue
npm install vue@2.x.x
修改main.js文件内容如下：
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
修改index.html文件
七、引入babel
npm install --save-dev babel-core babel-loader
将babel加入到webpack.config.js配置文件
八、打包
执行webpack指令报错
zsh: command not found: webpack
运行npx webpack，报错
ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
执行指令
npm install @babel/core --save-dev
//安装 @babel/core 包并将其添加到项目的开发依赖（devDependencies）
注解：@babel/core 是 Babel 编译器的核心模块，将 JS 代码转换为更旧版本的 JS 代码，以便在不支持新特性的环境中运行。安装 @babel/core，可以在开发过程中使用 Babel 进行代码转译，以便在旧版本的浏览器或环境中运行。
九、运行
运行index.html报错
这是因为正在使用的是vue的运行时版本，而此版本中的编译器不可用，需要把它切换成运行时 + 编译的版本，需要在webpack.config.js文件中添加以下代码：
注解：遇到一个模块引用时，Webpack会在内部使用resolve属性找到该模块的实际路径。解析到import Vue from 'vue'时，由于配置了别名，会找到vue/dist/vue.esm.js作为Vue模块的实际路径
别名更方便引用常用的模块，使用import Vue from 'vue$'可以直接引用Vue模块，不需要写出具体的路径
重新编译运行，效果如下：
运行成功🎉