概述

本文为一个搭建vue3+ts+less+webpack项目的一个笔记向的文章，记录了各种一个vue项目搭建的最基本的开发配置。

依赖

node版本为v18.20.2
npm版本10.5.0

初始化git本地仓库与package.json文件

新建文件夹并且初始化git仓库,创建.gitignore文件

注意这几行命令无法在cmd中运行，只能在powershell和linux的终端环境中运行

1
2
3
4
5
6
mkdir your_project_name #创建项目目录
cd your_project_name #进入项目目录
git init #创建本地git仓库
echo '/node_modules' >> .gitignore #将node_modules写入该忽略文件
npm init -y
#tsc --init # 前提要先全局安装tsc

开发时依赖

项目开发需要使用到各种工具，分为开发时依赖，运行时依赖。
这里说一下这两个依赖的区别，像webpack，当项目部署上线的时候，部署的是js、css、html、图片等文件，webpack只是我们构建项目的一个工具。所以他被归类到开发时的依赖。
还有ts，给开发过程中的程序员提供了强大的静态类型检查与更多的语法扩展功能。经过webpack构建之后还是js文件，所以也被归类到开发时依赖。

但是像vue、lodash、moment、这些属于我们真实代码里面要写逻辑的，就是运行时依赖，最后会被打包到构建的产物当中的。

所以在装工具的时候记得区分一下
比如现在我需要安装webpack,需要在install命令后跟上一个-D

1
2
3
npm install webpack -D
#为了兼容低版本的包管理工具，可以使用下面这条指令
# npm install webpack --save-dev

实际上就是–save-dev命令的一个缩写，npm版本>=5.0.0可以直接加个-D即可

运行时依赖比如vue就不需要-D参数，正常安装即可

1
npm install vue

基础模板开发时依赖如下

1
2
3
4
5
6
7
8
9
10
11
12
13
webpack #这个不说了
webpack-dev-server #为我们创建开发服务器，不然你会等待webpack打包完了之后通过构建的文件进行debug吗？
ts-loader #ts的加载器
vue-loader #webpack可不认.vue文件
webpack-cli #webpack的命令行工具，可以把webpack理解成一个软件，cli就是操作这个软件的摇杆
#处理css文件
css-loader
style-loader
html-webpack-plugin #处理html文件
# css增强，这两个是可选的，可以根据团队需求去变更所使用的css预编译器比如sass
less
less-loader 
mini-css-extract-plugin #从模板里面分割css代码到单独的文件夹，并且通过link标签的方式引入

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack serve --mode=development"
  },
  "devDependencies": {
    "@types/lodash": "^4.17.12",
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.3",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.9.1",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "vue-loader": "^17.4.2",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  }
}

运行时依赖

不过多赘述

1
2
3
4
5
6
{
  "dependencies": {
    "lodash": "^4.17.21",
    "vue": "^3.5.12"
  }
}

配置文件

webpack的玩法不止这些，还有很多玩法，并且社区还有很多很多插件、loader

webpack.config.js

项目根目录下

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const {Configuration} = require("webpack");
const path = require("node:path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/**
 * @type {Configuration}
 */
const config = {
    entry: "./src/main.ts", //项目的入口文件
    output: {
        path: path.resolve(__dirname, "./dist"), //出口文件夹
        filename: "[chunkhash].js", //出口文件的文件名
        clean: true, //每次构建时候需要先删除出口文件夹再生成
    },
    stats: "errors-warnings", //webpack cli的log配置
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html", //html的一个文件配置，告诉webpack它在哪
        }),
        new VueLoaderPlugin(), //vue的loader
        new MiniCssExtractPlugin() //css分割
    ],
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {loader: "ts-loader", options: {appendTsSuffixTo: [/\.vue$/]}}, //ts语言支持
            },
            {test: /\.vue$/, use: "vue-loader"}, //vue模板支持
            //让webpack能够处理css样式，先是交给css-loader处理，处理之后再交给style-loader,style-loader主要是将编写的样式动态的放到style标签里面，然后注入到html当中
            {test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"]},
            {test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]}
        ],
    },
    optimization: { //优化的配置，假设使用了很多第三方库，如果不做代码分割会导致所有js文件最后都打包成一个js文件，网络传输比较久，会阻塞页面的加载。
        //第三方库类似moment,lodash完全可以使用一些比较稳定的cdn去加载，没必要将其打包到我们的产物当中，这里没配置有
        //这块优化很重要，文件分包太细也不好，会导致一个网络多包传输。
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    format: {
                        comments: false,
                    },
                },
                extractComments: false,
            }),
        ],
        splitChunks: {
            cacheGroups: {
                lodash: {
                    name: "lodash",
                    chunks: "all",
                    test: /[\\/]node_modules[\\/]lodash[\\/]/,
                }
            }
        }
    },
};

module.exports = config;

vue的ts声明文件

建立于/src目录下
这个声明文件是用来告诉 TypeScript 如何处理 .vue 文件的。由于 Vue 组件文件通常以 .vue 结尾，TypeScript
默认情况下并不认识这种文件类型。通过声明模块，TypeScript 可以正确地识别和处理这些文件。

1
2
3
4
5
declare module '*.vue' {
    import {DefineComponent} from "vue";
    const component: DefineComponent<{}, {}, any>;
    export default component;
}