Setcina（目前还在更新以及完善中...）

08搭建自己的脚手架

2019-04-21

首先，我们为什么要搭建脚手架？其实，搭建脚手架可帮我们解决后端服务器的问题。我们也知道，其实在一个vue脚手架里面，其实就帮助我们把一些后端服务的弄好了

我们安装express

1
2
3
4
5
6
7
npm install express --save-dev

//自动监听代码
npm install webpack-dev-middleware

//热更新
npm install webpack-hot-middleware

首先我们src文件夹下，创建文件夹server。

  • 1.新建main.js
  • 2.新建文件夹express.js

我们再配置一下package.json里面的内容

1
2

"dev": "node src/server/main.js"

在服务端，es6语法的转换只需要加载babel-register

1
2
require("babel-register")
require("./express")

现在，准备好了之后，我们需要开启我们的本地服务器，我们打开express.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//启动一个服务器

import express from 'express';
import path from 'path';

//创建服务器
const server = express()

//配置启动路径
const stateMiddleware = express.static("dist")

//自动监听代码
const webpack = require('webpack')
const config = require('../../config/webpack.dev.js')


const compiler = webpack(config)

const webpackDevdMiddleWare = require("webpack-dev-middleware")(compiler, config.devServer)

//热更新
const webpackHot = require("webpack-hot-middleware")(compiler)


server.use(webpackDevdMiddleWare)

server.use(webpackHot)

server.use(stateMiddleware)


server.listen(8082, () => {
  console.log("server is running ...")
})

我们还需要到webpack.dev.js里面配置热更新

首先要把webpack引入进来，因为webpack-hot-middleware是需要依赖webpack

1
import webpack from 'webpack';

1
2
3
4
5
6
//本地服务器
  devServer: {
    contentBase: 'dist',
    overlay: true,
    hot: true
  },
1
2
3
4
5
6
plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new HTMLWebpackPlugin({
     template: "./src/index.html"
   })
 ]
Tags: WebPack
← 07polyfill、preset、transform 09前后端热更新 →

扫描二维码，分享此文章