基于webpack5从0搭建Vue脚手架

基于webpack5从0搭建Vue脚手架

[一篇文章说清 webpack、vite、vue-cli、create-vue 的区别 ](https://www.cnblogs.com/jyk/archive/2022/05/09/16248880.html)

1.搭建基本目录结构

• 开始创建一个项目，肯定需要一个html网页，并且引入打包后的js文件。

  • dist目录下放的是发布版本的代码。

  // dist/index.html
      <div id="app"></div>
      <script src="bundle.js"></script>
  

• src下放的是我们的源代码。

  // src/main.js
  // 入口文件
  import Vue from "vue";
  new Vue({
  
  });
  

此时的目录结构：

2.安装相关依赖

• npm i [email protected] element-ui axios

• bundle.js还不存在，所以需要去安装开发依赖。

  // -D: 开发依赖
  // webpack是安装它的打包器本体,webpack-cli提供了终端命令,去调用这个webpack
  // loa