Vue 2.7+Webpack 5.88搭建项目一、创建项目二、初始化项目生成package.json文件三、引入

一、创建项目

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'

解决：github.com/babel/babel…

执行指令

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模块，不需要写出具体的路径

重新编译运行，效果如下：

运行成功🎉