环境声名：webpack5+vue2
整理了一下通过基于webpack来创建一个vue项目的过程和通过vue-cli创建项目的过程，没有用vite，以后学习。

一、基于webpack创建
1、npm init ,构建一个有npm包管理工具的项目
2、npm install webpack webpack-cli
3、完善项目目录：src目录下面一定要有入口文件，创建一个dist目录下面需要一个html页面
4、新建webpack.config.js文件，用module.export到处一个config的对象
必须包含entry,和output
5、安装一些必要的loader
6、以使用sass为例，需要安装sass,sass-loader,css-loader,style-loader,并且在webpack中配置相应的rules
7、安转babel-loader,使得浏览器可以将ES6语法转为老语法，同时也要安装@babel/core:babel的核心库和@babel/preset-env，并且加上配置的rules规则。
babel/preset-env：可以根据你的配置(需要用户自己加，比如指定浏览器种类和版本，也可以指定运行环境的node版本)，来用对应的plugin来将你的新代码转换成老的代码。注意的是，合理的配置是可以减少打包的体积的。例如，你的代码的运行环境支持新代码的语法，通过配置可以避免进行代码转换而产生多余的代码。
8、安装vue
9、安装vue-loader,可以识别vue文件中的3种内容转化为js。并且在webpack配置文件中加上这个loader的匹配规则和处理loader
查了一下，建议应该将 vue-loader 和 vue-template-compiler 一起安装 (遇到问题记录如下：vue-template-compiler得和vue是一个版本，如果有报错也可以考虑一下 vue-loader和vue-template-compiler的版本是否对应的上)
这个插件在安装的时候，不仅需要在rules里面声名规则，还需要在plugins声名一个实例化的插件对象
(而vue-cli是一个开箱即用的项目脚手架工具，可以不用手动配置webpack，不然配置完webpack还需要配置vue-loader)
（这个插件会将webpack config定义的其他诸如css,js的规则，也应用到vue文件中去）
10、规定如何处理文件，图片等
11、安装vue-router，vue2的话需要用vue-router@3
12、尝试写一个vue的文件，在src下面创建一个入口的vue文件App.vue。然后在main.js里面把App的vue，挂载到页面上的id节点上去
13、尝试运行项目，需要修改package.json文件，"dev": "webpack --mode=development --watch"（--watch参数表示实时改动就编译）,"build": "webpack --mode=production",
14、安装vue-router,和axios这种要用的依赖，或者说element-ui
15、建立各个页面组件，指定router里的路由和组件的映射,在入口js中使用vue-router插件，并在App.vue中使用<router-link></router-link>
16、以上工作完成之后想要看效果都是通过运行npm run dev（因为webpack携带了watch指令，因此有改动都会进行一个自动的编译），然后打开dist目录下面的index.html文件的。如果想要在每次改动之后html文件也被自动刷新，可以安装webpack-dev-server。
17、webpack-dev-server：实现了在本地搭建一个web服务器并且实现改动实时加载。npm install --save-dev webpack-dev-server
安装之后只需要在webpack的配置下面新建一些配置，deveServer: {static: './dist',}
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为8080端口的可访问文件。
还需要在package.json中修改一个启动web服务器的命令：‘start’:'webpack-dev-server --open --mode=development'
附上我的webpack.config.js文件：

const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//在当前文件所在的的绝对路径下找dist文件
        filename: 'main.js'
    },
    devServer:{
        port: 8081,
        static: './dist',
    },
    //loader的配置
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader','css-loader','sass-loader']
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use:{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                type: 'asset/resource'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

二、基于vue-cli创建项目
1、安装@vue/cli
2、通过vue create hello-world 来创建应用
3、通过@vue/cli安装的项目，内置vue-cli-service命令，这个命令会启动一个本地的开发服务器(基于 webpack-dev-server) 。如果想要配置这个服务器，可以通过vue.config.js中的devServer来配置。
@vue/cli安装的项目，有一个vue-cli-service-build的命令可以用来打包（据文档说带有对js,css,html的压缩功能，和vendor chunk splitting功能，chunk manifest会自动内联在HTML里。有待验证。）
4、通过运行package.json中的命令，npm run serve就可以把项目跑起来
项目结构如下：

1668825756904.png