先用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用来指定构建模式 production
entry: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用来指定构建模式 production
entry: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()
]
}