快捷導(dǎo)航

webpack結(jié)合express實現(xiàn)自動刷新的方法

更新時間：2019年05月07日 08:32:57 作者：shibin-youlv-1

這篇文章主要給大家介紹了關(guān)于webpack結(jié)合express實現(xiàn)自動刷新的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在我們開發(fā)的過程中，我們會使用webpack-dev-server實現(xiàn)自動刷新，webpack-dev-server會把編譯后的文件全部保存在內(nèi)存里，而不會寫入到文件目錄內(nèi)。但當(dāng)我們的開發(fā)是前端和后端在一個項目里的時候就不行了。我們可以使用webpack結(jié)合express實現(xiàn)自動編譯刷新

配置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()
 ]
}

我們這里需要關(guān)注的是，每個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的靜態(tài)資源服務(wù)僅僅用于開發(fā)環(huán)境。到了生產(chǎn)環(huán)境，應(yīng)該使用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`)
})

這樣，我們在開發(fā)的時候，前端和后端都在同一個服務(wù)里運行了

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: