webpack手把手搭建vue项目，并实现webpack使用less编写css

使用webpack打包项目

1 . 首先安装好 git 和 vue 之后，检查一下是否安装成功，有这三个就代表安装成功了，可以开始了

（如果没有安装webpack的话，还要全局安装一下webpack）
npm install webpack webpack-cli –g
如果已经安装了webpack，可以使用webpack -v查看版本

2 . 在开始前，还需要在引入一个东西，引入 vue/cli-init
要不然后面的语句执行不了

 npm install -g @vue/cli-init

3 . 开始打包项目

vue init webpack yourprojectname

vue init webpack 为固定格式，yourprojectname 代表你的项目名称（一定要注意，项目名称不能出现大写字母，可以使用横线 - 等，但是一定不能有大写字母）

输入之后，回车的步骤如图所示

结束之后会在你的文件夹下面创建一个名为 yourprojectname的项目文件夹，使用 vscode（不会有人写前端不用 vscode 吧？？不会吧不会吧） 打开这个文件夹

4 . 引入并使用 less

使用 less 时有一个很重要的点就是 less 一定要使用 4.1 及以下的版本，否则报错
（1 . 引入 less 和 less-loader 的依赖，目前2020年9月引入的应该是7.0以上版本，版本太高了，没法用）
（2 . 引入 less-loader 4.1.0版本）

npm install less less-loader --save-dev
npm install [email protected] --save

在 build/webpack.base.conf.js 中 module 模块下添加这句话

      {
    
    
        test: /\.less$/,
        use: [
          {
    
    
            loader: 'style-loader',
          },
          {
    
    
            loader: 'css-loader',
          },
          {
    
    
            loader: 'less-loader',
          }
        ]
      }