• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

    來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:57:36
    文檔

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

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

    前言

    在我們開發(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ù)里運(yùn)行了

    總結(jié)

    聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

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

    webpack結(jié)合express實現(xiàn)自動刷新的方法:前言 在我們開發(fā)的過程中,我們會使用webpack-dev-server實現(xiàn)自動刷新,webpack-dev-server會把編譯后的文件全部保存在內(nèi)存里,而不會寫入到文件目錄內(nèi)。但當(dāng)我們的開發(fā)是前端和后端在一個項目里的時候就不行了。我們可以使用webpack結(jié)合expres
    推薦度:
    標(biāo)簽: 刷新 實現(xiàn) 自動刷新
    • 熱門焦點(diǎn)

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 亚洲精品欧美二区三区中文字幕| 亚洲国产精品久久66| 久久综合国产乱子伦精品免费| www.精品| 国产精品嫩草影院一二三区| 久久精品www人人爽人人| 老年人精品视频在线| 99久久精品无码一区二区毛片| 国产精品久久久久国产A级| 日韩一区二区三区精品| 国产精品熟女福利久久AV| 麻豆精品三级全部视频| 在线观看亚洲精品福利片| 国产精品片在线观看手机版| 999久久久无码国产精品| 一色屋精品视频在线观看| 精品久久久久久99人妻| 91精品国产福利在线观看| 国产精品福利一区二区| 国产欧美亚洲精品A| 亚洲精品无码国产| 亚洲国产人成精品| 久久久久99精品成人片三人毛片 | 国产精品视频全国免费观看| 久久这里只有精品首页| 99视频在线观看精品| 97久久国产亚洲精品超碰热| 四虎精品亚洲一区二区三区| 国产在线精品一区二区不卡麻豆| 精品亚洲综合久久中文字幕| 99在线精品视频| 55夜色66夜色国产精品视频| 潮喷大喷水系列无码久久精品 | 国产精品国产三级在线高清观看| 欧美精品免费在线| 久久国产精品99精品国产987| 国产精品久久国产精麻豆99网站| 91原创国产精品| 韩国精品欧美一区二区三区| 国产精品免费网站| 欧美日韩在线亚洲国产精品|