基于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 vue@2.7 element-ui axios

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

  // -D: 开发依赖
  // webpack是安装它的打包器本体,webpack-cli提供了终端命令,去调用这个webpack
  // loader在webpack里的作用:进行代码转换（比如把sass代码转换成css代码）
  
  // vue-loader   把.vue的文件提取出js代码,style,以及模板
  // vue-template-compiler 转换.vue文件里面的html(vue模板编译器)
  // sass-loader  把sass代码转换成css代码
  // css-loader   对css代码进行处理
  // style-loader 通过style标签加到html里面去
  // babel