先用npm init -y生成配置文件

在項目下新建src文件夾，app.js文件。src目錄用來放靜態資源文件，app.js是服務器文件，index.js是vue的入口文件

使用npm install express下載express框架

在app.js文件夾開啟node服務，監聽的端口為3000，并且開放靜態資源文件的src目錄

const express = require('express');
const app = express();
const path = require('path');
//開放靜態資源訪問，只需要輸入文件名即可，不需要輸入文件夾
app.use(express.static(path.join(__dirname,'src')));
app.listen(3000);

使用node app.js發現node服務啟動成功

安裝webpack：
1.運行npm install webpack webpack-cli -D命令
2.在項目根目錄中，創建名為webpack.config.js的webpack配置文件
3.在webpack的配置文件中，初始化配置

module.exports = {mode:'development'//mode用來指定構建模式 production
}

4.在package.json配置文件中的scripts節點下，新增dev腳本如下：

"scripts":{"dev":"webpack"
}

5.使用npm run dev命令，啟動webpack進行項目打包
6.webpack會幫我們創建一個dist目錄，dist目錄當中的main.js為低級的js代碼

webpack配置打包的入口和出口:
默認打包的入口文件為src->index.js，打包的輸出文件為dist->main.js文件
如果要修改打包的入口和出口，可以在webpack.config.js新增如下配置信息：

const path = require('path');
module.exports = {mode:'development',//mode用來指定構建模式 productionentry:path.join(__dirname,'./src/index.js'),//打包入口文件的路徑output:{path:path.join(__dirname,'./src'),//輸出文件的存放路徑filename:'bundle.js',//輸出文件的名稱}
}

src目錄下的bundle.js是webpack幫我們自動創建的，我們只需要在index.html當中引入bundle.js項目就能運行

打包處理css文件
1.運行npm install style-loader css-loader -D命令，安裝處理css文件的loader
2.在webpack.config.js的module.rules數組中，添加loader規則如下：

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

test表示匹配的文件類型，use表示要用的loader

打包處理高級js語法：
1.npm install babel-loader @babel/core @babel/runtime -D
2.npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在項目根目錄中，創建babel配置文件babel.config.js并初始化配置如下：

module.exports = {presets:[ '@babel/preset-env' ],plugins:[ '@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties' ]
}

4.在webpack.config.js的module -> rules數組中，添加loader規則如下：

{ test:/.js$/,use:‘babel-loader’,exclude:/node_modules/}

vue單文件組件的使用方法，在src目錄下新建components目錄

webpack中配置vue組件的加載器：
1.運行npm install vue-loader vue-template-compiler -D
2.在webpack.config.js配置文件中，添加vue-loader的配置項如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module:{
rules:[//…其他規則{ test:/.vue$/,use:'vue-loader'}
]
},
plugins:[//其他插件new VueLoaderPlugin()
]
}

在webpack項目中使用vue：
1.運行npm install vue -S安裝vue
2.在src->index.js入口文件中通過import Vue from ‘vue’來導入vue構造函數
3.創建vue的實例對象，并指定要控制的el區域
4.通過render函數渲染App根組件

import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({el:'#app',render:h=>h(App)
})

做完以上的配置時，在命令行工具輸入npm run dev,打包成功,并且src目錄下多了bundel.js文件，把這個bundle.js引入在index.html中，輸入node app.js打開服務器

然后打開localhost：3000發現項目已經可以成功運行

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {mode:'development',//mode用來指定構建模式 productionentry:path.join(__dirname,'./src/index.js'),//打包入口文件的路徑output:{path:path.join(__dirname,'./src'),//輸出文件的存放路徑filename:'bundle.js',//輸出文件的名稱},module:{rules:[{test:/.css$/,use:['style-loader','css-loader']},{ test:/.js$/,use:'babel-loader',exclude:/node_modules/},{ test:/.vue$/,use:'vue-loader'}]},plugins:[//其他插件new VueLoaderPlugin()]
}