webpack結合express實現自動刷新

在咱們開發的過程當中，咱們會使用webpack-dev-server實現自動刷新，webpack-dev-server會把編譯後的文件所有保存在內存裏，而不會寫入到文件目錄內。但當咱們的開發是前端和後端在一個項目裏的時候就不行了。咱們可使用webpack結合express實現自動編譯刷新

• 配置webpack

首先就是配置webpack的配置。新建一個webpack.config.js文件

const path = require('path')
const webpack = require('webpack')
var hotMiddlewareScript = 'webpack-hot-middleware/client'

module.exports = {
  entry: {
    main: ['./src/main.js', hotMiddlewareScript]
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js']
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}
複製代碼

咱們這裏須要關注的是，每一個entry後都要增長一個hotMiddlewareScript，還有就是增長3個插件

首先新建一個webpack.middleware文件，這裏咱們須要用到webpack-dev-middleware和 webpack-hot-middleware兩個中間件。

const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackConfig = require('./webpack.config')

module.exports = app => {
  let compiler = webpack(webpackConfig)

  app.use(webpackDevMiddleware(compiler, {
    publicPath: '/',
    stats: {
      colors: true,
      chunks: false
    }
  }))
  app.use(webpackHotMiddleware(compiler))  
}

複製代碼

注意：webpack-dev-middleware和webpack-hot-middleware的靜態資源服務僅僅用於開發環境。到了生產環境，應該使用express.static()。

• 下面編寫express代碼

const express = require('express')
const bodyParser = require('body-parser')
const {resolve} = require('path')
const webpackMiddleware=require('./webpack.middleware')

const router = express.Router()
const app=express()
const port = process.env.PORT || 3000

webpackMiddleware(app)

app.use(express.static(resolve(__dirname,'./public')))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

// ...代碼

app.use(router)


app.listen(port, () => {
  console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
})

複製代碼

這樣，咱們在開發的時候，前端和後端都在同一個服務裏運行了