快捷導(dǎo)航

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

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

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

前言

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

配置webpack

首先就是配置webpack的配置。新建一個(gè)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)注的是，每個(gè)entry后都要增加一個(gè)hotMiddlewareScript，還有就是增加3個(gè)插件
首先新建一個(gè)webpack.middleware文件，這里我們需要用到webpack-dev-middleware和 webpack-hot-middleware兩個(gè)中間件。

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ù)僅僅用于開(kāi)發(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`)
})

這樣，我們?cè)陂_(kāi)發(fā)的時(shí)候，前端和后端都在同一個(gè)服務(wù)里運(yùn)行了

總結(jié)

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

您可能感興趣的文章: