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

在项目下新建src文件夹，app.js文件。src目录用来放静态资源文件，app.js是服务器文件，index.js是vue的入口文件

使用npm install express下载express框架

在app.js文件夹开启node服务，监听的端口为3000，并且开放静态资源文件的src目录

<code>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的配置文件中，初始化配置

<code>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新增如下配置信息：

<code>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规则如下：

<code>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

<code>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()

]

}