基于webpack从零构建vue2说在前面项目搭建不会搭建的非常全，不会涉及 ui 库，网络请求等，以项目主体和通过工

相比于框架自带的脚手架如 vue-cli 构建项目，通过 webpack 构建更加灵活，但是也容易出错；对于从零搭建项目是一种很好的学习方式。

说在前面

项目搭建不会搭建的非常全，不会涉及 ui 库，网络请求等，以项目主体和通过工具优化为主；

环境准备

node 14.19.0
npm 6.14.16
npm 源 registry.npmmirror.com

搭建步骤

1. 执行 `npm init -y`

2. 安装依赖

vue 和 vue-template-compiler 必须是一样的
vue-router v3 与 v4 在写法上有不同，这里用的是 v3
在 webpack5 中安装 less-loader 需要安装 cache-loader


npm i -D webpack@5.74.0 webpack-cli@4.10.0 webpack-dev-server@4.10.0
npm i -D html-webpack-plugin@5.5.0

npm i vue@2.6.11

npm i -D vue-loader@15.10.0 vue-template-compiler@2.6.11
npm i -D babel-loader@8.2.5 @babel/core@7.18.13
npm i -D @babel/preset-env@7.18.10 @babel/polyfill@7.12.1
npm i -D @babel/plugin-transform-runtime@7.18.10
npm i -S @babel/runtime@7.18.9 @babel/runtime-corejs2@7.18.9
npm i -D style-loader@3.3.1 css-loader@6.7.1
npm i less-loader@11.0.0 less@4.1.3 -D
npm i cache-loader -D
npm i url-loader@4.1.1 file-loader@6.2.0 -D

npm i loadsh
npm i vue-router@3.6.5

3. 建立如下文件夹

4. public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

5. .babelrc

babel 相关的依赖是用来处理 js 转换问题

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

6. package.json

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode development"
  },

7. router/index.js

const routes = [
  { path: '/', component: HomeView },
  { path: '/page', component: PageView },
]

const router = new VueRouter({
  routes,
})
export default router

8. webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  watch: true,
  module: {
    rules: [
      { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /.vue$/,
        loader: "vue-loader",
      },
      { test: /.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /.less$/,
        use: ["style-loader", "cache-loader", "css-loader", "less-loader","cache-loader"],
      },
      {
        test: /.(jpg|png|gif|bmp|jpeg|svg)$/,
        use: "url-loader?esModule=false&limit=500&name=imgs/[hash:8]-[name].[ext]",
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        loader: "file-loader",
        options: {
          esModule: false,
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
  ],
  resolve: {
    extensions: [".js", ".css", ".vue"],
  },
  devServer: {
    port: 8080,
    hot: true,
    open: true,
    static: {
      directory: path.join(__dirname, "./"),
      watch: true,
    },
  },
};

9. main.js

import App from "./App";
import Vue from "vue";
import router from './router'

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

依赖详解

packags.json 中有非常多的依赖，这里会去阐述每个依赖的作用

webpack 相关

webpack

webpack 是一个打包工具，将 ts、less、sass、vue 等资源转换成 html、css、js
提供各种模块化，commonjs、esmodule、AMD 等等

webpack-cli

webpack-cli 的Webpack 的命令行接口，执行 npm run build 本质上执行的是 webpack ，webpack-cli 就是让允许终端执行 webpack 命令

webpack-dev-server

webpack-dev-server 用于项目的热更新，以免每次都要打包再刷新页面

vue 相关

vue

vuejs 的核心库，用来提供响应式更新，组件化开发，指令等功能

vue-loader

用来处理 .vue 单文件，将 vue 文件中的 template，style，css 交给不同的工具（vue-template-complier 处理 tempalte 模块；babel-loader 处理 script 模块；less/less-load 而处理 style 模块）去处理，最终形成一个 js 模块
支持热更新

vue-template-complier

将 vue 文件中的 template 编译成 render 函数，vue-loader 依赖 vue-tempalte-complier 处理 template 部分

babel 相关

@babel/core

babel 是一个广泛使用的 JavaScript 编译器，能够将现代 JavaScript 代码（如 ES6+ 语法、JSX 等）转换为向后兼容的版本，@babel/core 是 babel 的核心库，提供了编译 JavaScript 代码所需的所有基本功能

babel-loader

配合 babel 编译 .vue .ts 成 js 文件

@babel/preset-env

@babel/preset-env 会根据你指定的目标环境（如浏览器版本、Node.js 版本等）自动选择需要的 Babel 插件。这意味着你不需要手动添加或管理每个单独的插件，只需配置目标环境，@babel/preset-env 会为你处理其余的事情
@babel/preset-env 可以将 ES6 模块（ESM）转换为其他模块格式（如 CommonJS、AMD、UMD 等），以便在不支持 ESM 的环境中使用

@babel/polyfill

@babel/polyfill 会在编译时自动将必要的 polyfills 引入到你的项目中，从而确保代码的兼容性

@babel/plugin-transform-runtime

一个插件，可以重用 Babel 注入的帮助程序代码以节省代码量

样式相关

less-loader 处理样式文件，将 less 转成 css

url-loader/file-loader

将文件转成 base64 或者转成 http 链接

总结

相比于 vue-cli 直接生成，webpack 搭建可以学习到 webpack 的构建方式，vue 文件如何被处理，babel 方面的知识。下一篇会基于该项目进行 webpack 优化

基于webpack从零构建vue2