環(huán)境聲名：webpack5+vue2
整理了一下通過(guò)基于webpack來(lái)創(chuàng)建一個(gè)vue項(xiàng)目的過(guò)程和通過(guò)vue-cli創(chuàng)建項(xiàng)目的過(guò)程，沒(méi)有用vite油航，以后學(xué)習(xí)但荤。

一、基于webpack創(chuàng)建
1确买、npm init ,構(gòu)建一個(gè)有npm包管理工具的項(xiàng)目
2、npm install webpack webpack-cli
3纱皆、完善項(xiàng)目目錄：src目錄下面一定要有入口文件湾趾，創(chuàng)建一個(gè)dist目錄下面需要一個(gè)html頁(yè)面
4、新建webpack.config.js文件派草，用module.export到處一個(gè)config的對(duì)象
必須包含entry,和output
5搀缠、安裝一些必要的loader
6、以使用sass為例近迁，需要安裝sass,sass-loader,css-loader,style-loader,并且在webpack中配置相應(yīng)的rules
7艺普、安轉(zhuǎn)babel-loader,使得瀏覽器可以將ES6語(yǔ)法轉(zhuǎn)為老語(yǔ)法，同時(shí)也要安裝@babel/core:babel的核心庫(kù)和@babel/preset-env，并且加上配置的rules規(guī)則歧譬。
babel/preset-env：可以根據(jù)你的配置(需要用戶自己加岸浑，比如指定瀏覽器種類和版本，也可以指定運(yùn)行環(huán)境的node版本)瑰步，來(lái)用對(duì)應(yīng)的plugin來(lái)將你的新代碼轉(zhuǎn)換成老的代碼矢洲。注意的是，合理的配置是可以減少打包的體積的缩焦。例如读虏，你的代碼的運(yùn)行環(huán)境支持新代碼的語(yǔ)法，通過(guò)配置可以避免進(jìn)行代碼轉(zhuǎn)換而產(chǎn)生多余的代碼袁滥。
8盖桥、安裝vue
9、安裝vue-loader,可以識(shí)別vue文件中的3種內(nèi)容轉(zhuǎn)化為js题翻。并且在webpack配置文件中加上這個(gè)loader的匹配規(guī)則和處理loader
查了一下揩徊，建議應(yīng)該將 vue-loader 和 vue-template-compiler 一起安裝 (遇到問(wèn)題記錄如下：vue-template-compiler得和vue是一個(gè)版本，如果有報(bào)錯(cuò)也可以考慮一下 vue-loader和vue-template-compiler的版本是否對(duì)應(yīng)的上)
這個(gè)插件在安裝的時(shí)候藐握，不僅需要在rules里面聲名規(guī)則靴拱，還需要在plugins聲名一個(gè)實(shí)例化的插件對(duì)象
(而vue-cli是一個(gè)開箱即用的項(xiàng)目腳手架工具，可以不用手動(dòng)配置webpack猾普，不然配置完webpack還需要配置vue-loader)
（這個(gè)插件會(huì)將webpack config定義的其他諸如css,js的規(guī)則袜炕，也應(yīng)用到vue文件中去）
10、規(guī)定如何處理文件初家，圖片等
11偎窘、安裝vue-router，vue2的話需要用vue-router@3
12溜在、嘗試寫一個(gè)vue的文件陌知，在src下面創(chuàng)建一個(gè)入口的vue文件App.vue。然后在main.js里面把App的vue掖肋，掛載到頁(yè)面上的id節(jié)點(diǎn)上去
13仆葡、嘗試運(yùn)行項(xiàng)目，需要修改package.json文件志笼，"dev": "webpack --mode=development --watch"（--watch參數(shù)表示實(shí)時(shí)改動(dòng)就編譯）,"build": "webpack --mode=production",
14沿盅、安裝vue-router,和axios這種要用的依賴，或者說(shuō)element-ui
15纫溃、建立各個(gè)頁(yè)面組件腰涧，指定router里的路由和組件的映射,在入口js中使用vue-router插件，并在App.vue中使用<router-link></router-link>
16紊浩、以上工作完成之后想要看效果都是通過(guò)運(yùn)行npm run dev（因?yàn)閣ebpack攜帶了watch指令窖铡，因此有改動(dòng)都會(huì)進(jìn)行一個(gè)自動(dòng)的編譯）疗锐，然后打開dist目錄下面的index.html文件的。如果想要在每次改動(dòng)之后html文件也被自動(dòng)刷新费彼，可以安裝webpack-dev-server滑臊。
17、webpack-dev-server：實(shí)現(xiàn)了在本地搭建一個(gè)web服務(wù)器并且實(shí)現(xiàn)改動(dòng)實(shí)時(shí)加載敌买。npm install --save-dev webpack-dev-server
安裝之后只需要在webpack的配置下面新建一些配置简珠，deveServer: {static: './dist',}
以上配置告知 webpack-dev-server阶界，在 localhost:8080 下建立服務(wù)虹钮，將 dist 目錄下的文件，作為8080端口的可訪問(wèn)文件。
還需要在package.json中修改一個(gè)啟動(dòng)web服務(wù)器的命令：‘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'),//在當(dāng)前文件所在的的絕對(duì)路徑下找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創(chuàng)建項(xiàng)目
1本姥、安裝@vue/cli
2羡铲、通過(guò)vue create hello-world 來(lái)創(chuàng)建應(yīng)用
3、通過(guò)@vue/cli安裝的項(xiàng)目仗谆，內(nèi)置vue-cli-service命令，這個(gè)命令會(huì)啟動(dòng)一個(gè)本地的開發(fā)服務(wù)器(基于 webpack-dev-server) 。如果想要配置這個(gè)服務(wù)器律姨，可以通過(guò)vue.config.js中的devServer來(lái)配置。
@vue/cli安裝的項(xiàng)目臼疫，有一個(gè)vue-cli-service-build的命令可以用來(lái)打包（據(jù)文檔說(shuō)帶有對(duì)js,css,html的壓縮功能择份，和vendor chunk splitting功能，chunk manifest會(huì)自動(dòng)內(nèi)聯(lián)在HTML里烫堤。有待驗(yàn)證荣赶。）
4、通過(guò)運(yùn)行package.json中的命令鸽斟，npm run serve就可以把項(xiàng)目跑起來(lái)
項(xiàng)目結(jié)構(gòu)如下：

1668825756904.png