基于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
      
  
      
  1
  2
  3

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

  // src/main.js
  // 入口文件
  import Vue from "vue";
  new Vue({
  
  });
  1
  2
  3
  4
  5
  6

此时的目录结构：

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-loader 将新的js语法转换成老的js语法
  // @babel-core  babel的核心库
  // @babel/preset-env es语法编译
  
  npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

3.配置webpack.config.js文件

// 导入path的原因:因为不同系统下的分割符不同,有可能是\也有可能是/,所以借助node提供的内置模块
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  // 入口文件
  entry: "./src/main.js",
  // 打包后的文件
  output: {
    path: path.resolve(__dirname, "dist"), // 打包后的文件放在那个文件夹(绝对路径)
    filename: "bundle.js", // 定义打包后的文件名
  },
  // 在webpack里面任何文件都叫模块
  module: {
    // 模块的打包规则
    rules: [
      {
        test: /\.vue$/, // test做判断
        use: "vue-loader", // 使用那个loader来处理判断后的文件
      },
      {
        test: /\.s[ca]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.m?js$/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env"] },
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        // 处理图片老的写法
        // use: { loader: "file-loader", options: { esModule: false } },
        // 新的写法
        type: "asset/resource",
      },
    ],
  },
  // 插件,给webpack增加更多新的功能
  // 通过这个插件告诉vue-loader, 处理rules,将这些规则应用到*.vue文件里的相应语言块中
  // 即将我们配置的其它loader,统一交给vue-loader来处理
  plugins: [new VueLoaderPlugin()],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

4.编写main.js和App.vue

main.js：

// 入口文件
import Vue from "vue";
import App from "./App.vue";
new Vue({
  // 绑定到那个元素
  el: "#app",
  // 通过渲染函数来指定
  render: (h) => h(App),
});
1
2
3
4
5
6
7
8
9

App.vue：

1
2
3
4
5
6
7
8
9

5.配置package.json文件

此时直接输入webpack会报错，所以需要在package.json文件下创建脚本：

package.json：

–mode后面有两个选项：

• development开发环境就是在自己电脑上运行的；
• production生产环境，它会进行代码的优化、压缩等。

–watch：当webpack发现有代码变换的时候，它会重新编译、重新打包。

“build” ： 上线的时候运行构建命令

  "scripts": {
    "serve": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
  },
1
2
3
4

此时执行npm run serve：

再看此时的目录和生成的bundle.js文件：

踩的坑：vue-loader版本问题，解决如下：

TypeError: Cannot read properties of undefined (reading ‘styles‘)

运行index.html：

• 运行后在index.html里修改代码，不需要重新打包就能看到变化。

6.创建多个页面

• 安装路由：npm i vue-router@3.2.0

• 在src下创建router文件夹，并创建index.js文件

• 具体的写法和平时写的一样，这里就不贴出来了

7.借助DevServer开发服务器：

去掉URL中的dist：

• 安装webpack的开发依赖（开发服务器）：npm i -D webpack-dev-server

webpack dev server官方文档详解

• 然后修改package.json文件，下面可以看到 "webpack-dev-server"已经安装了，再在scripts下修改代码。

 "serve": "webpack serve --mode=development"
1

• 在webpack.config.js里面配置开发服务器：

  devServer: {
    static: "./dist", // 静态文件夹指向dist目录
  },
1
2
3

• 输入npm run serve启动项目：
  

• 打开查看
  

自动打开浏览器：

  devServer: {
    static: "./dist", // 静态文件夹指向dist目录
    open: true, //输入 npm run serve 自动打开浏览器
    host: "local-ip", //设置本机ip
    port: 8888, //手动指定端口号
  },
1
2
3
4
5
6

8.关于vue3脚手架的搭建：

• 大体上是一样的，只不过vue3的api会不同，以及新建Vue实例那里。

• 注意安装依赖时，vue-loader的版本问题。

• 在使用npm安装package之前，得先 npm init 否则 node_modules 不会出现。