webpack結合express實現自動刷新的方法

來源：懂視網責編：小采時間：2020-11-27 21:57:36

webpack結合express實現自動刷新的方法

webpack結合express實現自動刷新的方法:前言在我們開發的過程中，我們會使用webpack-dev-server實現自動刷新，webpack-dev-server會把編譯后的文件全部保存在內存里，而不會寫入到文件目錄內。但當我們的開發是前端和后端在一個項目里的時候就不行了。我們可以使用webpack結合expres

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack結合express實現自動刷新的方法:前言在我們開發的過程中，我們會使用webpack-dev-server實現自動刷新，webpack-dev-server會把編譯后的文件全部保存在內存里，而不會寫入到文件目錄內。但當我們的開發是前端和后端在一個項目里的時候就不行了。我們可以使用webpack結合expres

前言

在我們開發的過程中，我們會使用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`)
})

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

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack結合express實現自動刷新的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：刷新實現自動刷新

熱門焦點

webpack結合express實現自動刷新的方法

webpack結合express實現自動刷新的方法

webpack結合express實現自動刷新的方法

最新推薦

猜你喜歡

熱門推薦