脚手架搭建

工程目录新建

1.src文件夹新建server文件夹
2.server文件夹新建main.js：node的启动文件
3.server文件夹新建express.js：express配置文件

node运行命令配置

1.npm安装依赖express, express用来启动服务
npm install -D express@4.17.1
2.package.json设置node启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config=config/webpack-dev.js",
    "build": "webpack ---config=config/webpack-dev.js",
    "dev": "node src/server/main.js"        //增量
  },

express后端服务配置

main.js文件

// 将后端服务转换为es5，即当前路径下的express.js文件
require("babel-register")
// 应用express配置文件
require("./express")

express.js文件

import express from 'express' //babel-register会将其转换为es5的语法

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

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

//监听端口
server.listen(8080, ()=>{
    console.log("server is running")
})

node启动服务

npm run dev
如下图console.log("server is running")打印在后台

image.png

服务监听代码更新

使用webpack的插件webpack-dev-middleware，监听代码变更实现实时代码打包

webpack-dev-middleware

安装
npm install -D webpack-dev-middleware@3.7.0
express.js配置

import express from 'express'

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

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

//监听代码（增量代码）
const webpack = require("webpack")   //引入webpack
const config = require("../../config/webpack-dev")   //引入webpack配置文件
const compile = webpack(config)    //初始化
const webpackDevMiddleWare = require("webpack-dev-middleware")(compile, config.devServer)    //初始化webpack-dev-middleware插件
server.use(webpackDevMiddleWare)   //使用插件

server.use(staticMiddleWare)

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

npm run dev启动服务

webpack-hot-middleware

webpack-dev-middleware实现了代码更新实时打包，但无法实现实时刷新浏览器实现完成的热更新。因此webpack-dev-middleware配合webpack-hot-middleware可实现完整的热更新

webpack-hot-middleware插件安装
npm install -D webpack-hot-middleware@2.25.0
express配置文件设置

import express from 'express'

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

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

//监听代码
const webpack = require("webpack")
const config = require("../../config/webpack-dev")
const compile = webpack(config)
const webpackDevMiddleWare = require("webpack-dev-middleware")(compile, config.devServer)
//热更新代码
const webpackHotMiddleWare = require("webpack-hot-middleware")(compile)//增量代码

server.use(webpackDevMiddleWare)

server.use(webpackHotMiddleWare)  //增量代码，注意位置

server.use(staticMiddleWare)

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

webpack-dev.js配置文件设置

const path = require("path")
const webpack = require("webpack")  //增量代码，注意要用require，此时babel还没有用到
module.exports = {
    entry: {
        main: ["./src/main.js"]
    },
    mode: "development",
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/"
    },
    devServer: {
        contentBase: "dist",
        overlay: true,
        hot:true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {loader: "babel-loader"}
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"}
                ]
            },
            {
                test: /\.html/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].html"
                        }
                    },
                    {loader: "extract-loader"},
                    {loader: "html-loader"}
                ]
            },
            {
                test: /\.(jpg|png|gif)/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "./images/[name]-[hash:8].[ext]"
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //增量代码
    ]
}

main.js配置文件设置

require("babel-runtime/regenerator")
require("webpack-hot-middleware/client") //增量代码
require("./main.css")
require("./index.html")

var a = async args => {
    const {a, b} = args
    await console.log("hello world", a, b)
    console.log("Done")
}

a({a:1, b:2})

nodemon的使用

前面启动采用node的方式启动服务"dev": "node src/server/main.js"，能够实现前端代码的监听和更新，但无法实现后端代码的实时监测和更新。采用nodemon可以实现前后端代码的实时监测和更新dev1": "nodemon --watch config --watch src/server src/server/main.js

nodemon的安装及配置

1.全局安装nodemon: npm install -g nodemon
2.package.json配置启动命令.

"dev1": "nodemon --watch config --watch src/server src/server/main.js"
//--watch config：监听config文件夹下的文件
//--watch src/server：监听src/server文件夹下的文件
//src/server/main.js：启动命令

后端代码+css的更新

1.命令行启动本地服务npm run dev1
2.config文件夹下的文件webpack.dev.json修改后，终端能够实时监测并完成打包。
具体包括：css文件的变更（如src/main.css），以及config/webpack.dev.json文件的修改

html代码的更新

完成上述nodemon的配置，能够实现html实时变更监测，但无法实现实时刷新，因此需要安装插件来实现html-webpack-plugin

1.html-webpack-plugin安装，npm install -D html-webpack-plugin
2.webpack.dev.json配置文件设置，添加插件

const HTMLWebpackPlugin = require("html-webpack-plugin")  //增量
plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HTMLWebpackPlugin({                     //增量
            template: "./src/index.html"
        })
    ]

3.main.js文件配置

require("babel-runtime/regenerator")
require("webpack-hot-middleware/client?reload=true")      //增量
require("./main.css")
require("./index.html")

4.修改webpack.dev.json去除先前使用html相关loader，避免与html-webpack-plugin冲突

{
                test: /\.html$/,
                use: [
                    // {
                    //     loader: "file-loader",
                    //     options: {
                    //         name: "[name].html"
                    //     }
                    // },
                    // {loader: "extract-loader"},
                    {loader: "html-loader"}
                ]
            },