使用webpack-dev-middleware 和 webpack-hot-middleware 配置一個dev-server

　　關於Webpack的資料教程網上已經數不勝數，可是對手動配置一個Express server的確很少，因而我對此進行着重的瞭解一番。

　　webpack-dev-middleware和webpack-hot-middleware分別是幹什麼的？

　　首先這兩個插件組合起來是能夠實現頁面的熱刷新工做， 而作到這一點，首先要對更改的文件進行監控，編譯，而這個webpack-dev-middleware就是幹這個的，專業點叫作伺服器，而webpack-hot-middleware 是用來進行頁面的熱重載的。並且這些文件資源並不會出如今真實的路徑裏，而是保存在內存中，若是文件改變，這個伺服器就不在去請求舊的文件，而是延遲請求直到新的文件編譯完成。

　　開始編碼

　　你可使用一份你以前練手的webpack項目，寫好正確的配置文件（webpack.config.js）,基本上會和下面的個人這份相似，並無太多的東西：

　　

var path = require("path");
var webpack = require("webpack");
//var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: "./src/js/page/index.js",
    output:{
        path : path.join(__dirname,'dist'),
        publicPath : "/webpack/dist",
        filename : "js/[name].js"
    },
    module:{
        loaders:[
            { test: /\.css$/, loader: 'style-loader!css-loader' }
        ]
    },
    plugins:[
        //new ExtractTextPlugin("css/[name].css"),new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./src/view/index.html',
            inject:true,
            hash:true,
            minify:{
                removeComments:true,
                collapseWhitespace:false
            }
        })
    ]
}

 

　使用webpack-dev-middleware

　　下面在跟目錄下新建一個dev-server.js,而後寫下以下的代碼：

const path = require("path")
const express = require("express")
const webpack = require("webpack")
//使用前別忘了install
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackConfig = require('./webpack.config.js')

const app = express(),
            DIST_DIR = path.join(__dirname, "dist"),
            PORT = 9090,
            complier = webpack(webpackConfig)

app.use(webpackDevMiddleware(complier, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true
}))


app.get("*", (req, res, next) =>{
    const filename = path.join(DIST_DIR, 'index.html');

    complier.outputFileSystem.readFile(filename, (err, result) =>{
        if(err){
            return(next(err))
        }
        res.set('content-type', 'text/html')
        res.send(result)
        res.end()
    })
})

app.listen(PORT)

complier = webpack(webpackConfig)會建立一個用來傳給webpack-middle-ware的對象，同時咱們還能夠給他webpack-middle-ware傳一些option,比較重要的是這個publicPath, 這個是必傳的參數，一般是和你的webpack.config.js
裏的publicPath是一致的，而後經過

app.get("*", (req, res, next) =>{
    const filename = path.join(DIST_DIR, 'index.html');

    complier.outputFileSystem.readFile(filename, (err, result) =>{
        if(err){
            return(next(err))
        }
        res.set('content-type', 'text/html')
        res.send(result)
        res.end()
    })
})

這段代碼來告訴express去讀取文件，這裏我並無直接使用下面這種方式：

app.get("*", (req, res) => {  
    res.sendFile(path.join(DIST_DIR, "index.html"));
});

這樣直接發送文件，由於全部的文件是在內存中的，咱們直接去目錄裏去讀是不對的，因此採用上面的方式手動指定文件的加載目錄在哪裏。

Hot Module Replacement

　　如今咱們已經集成了webpack-dev-middleware，使用這個插件很簡單，在webpack.config.js裏的入口和插件裏進行相應修改：

...
entry: ["webpack-hot-middleware/client", "./main"],
...
plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.HotModuleReplacementPlugin(),
         new webpack.NoErrorsPlugin()
     ]

修改entry的緣由是咱們要配置當文件更新時通知服務器：

　　而後接下來在Express裏配置使用webpack-hot-middleware

import webpackHotMiddleware from "webpack-hot-middleware";
...
app.use(webpackDevMiddleware(compiler, {  
    publicPath: config.output.publicPath
}));
...
app.use(webpackHotMiddleware(compiler));

到這裏就已經配置好了，在package.json裏添加一個腳本：

"start": "node dev-server.js"

可是事實上這時候你運行npm start 的時候並不能實時刷新，由於

 

　　

只有接受更新的module纔會被熱更新過，咱們須要全部的文件都熱更新，因此在入口文件（個人是./js/page/index.js）裏面加上：

if (module.hot) {  
 module.hot.accept();
}

這時候就能夠實時刷新了。

坑：

　　當你使用ExtractTextPlugin時，由於這個插件自己的緣由，修改css文件是不會更新的，因此在dev的時候能夠不使用這個插件。

 

 

 

注：本文出自博客園 https://home.cnblogs.com/u/mdengcc/ ，轉載請註明出處。