webpack學習之路（三）webpack-dev-middleware

時間 2019-11-08

標籤 webpack 學習之路 dev middleware 简体版

原文原文鏈接

上一節，學習到經過webpack-dev-server搭配HotModuleReplacementPlugin插件能夠實現不刷新頁面的模塊熱更新。html

最後講解原理的時候，咱們知道webpack-dev-server在內部使用Express搭建搭建了一個小型Node服務來接收處理後的文件，那是什麼程序傳遞文件的呢？node

就是webpack-dev-middleware。webpack

webpack-dev-middleware

定義：web

webpack-dev-middleware 是一個容器(wrapper)，它能夠把 webpack 處理後的文件傳遞給一個服務器(server)。
webpack-dev-server 在內部使用了它，同時，它也能夠做爲一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求。express

咱們也使用Express，搭配webpack-dev-middleware來實現文件更新功能npm

咱們先搭建一個基礎項目骨架json

├── dist
│   └── index.html
├── package.json
├── src
│   ├── block.js
│   └── index.js
└── webpack.dev.config.js
複製代碼

由於是在開發環境須要熱更新，因此依然是webpack.dev.config.jsbash

咱們來簡單配置一下：服務器

npm i webpack webpack-cli webpack-dev-middleware express --save-dev
複製代碼

webpack.dev.config.jsapp

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};
複製代碼

server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const path = require('path');

const app = express();
const config = require('./webpack.dev.config.js');
const compiler = webpack(config);
// const DIST_DIR = path.join(__dirname, "dist")

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));
// 使用靜態資源目錄，才能訪問到/dist/idndex.html
app.use(express.static(config.output.path))

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});
複製代碼

/src/index.js

'use strict'
import { test } from './block.js'
document.write('hello world~')

test()
複製代碼

/src/block.js

'use strict'

module.exports = {
  test: function () {
    console.log(12345)
  }
}
複製代碼

/dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack-dev-middleware</title>
  <script src="./index.js"></script>
</head>
<body>
</body>
</html>
複製代碼

package.json 增長一個命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "server": "node server.js"
  },
複製代碼

npm run server
複製代碼

咱們能夠看到已經編譯成功，直接訪問http://localhost:3000/

而後咱們修改一下block.js

'use strict'

module.exports = {
  test: function () {
    console.log(123456)
  }
}
複製代碼

能夠看到從新編譯了，這時候咱們手動刷新下頁面，便可看到修改。

以上就是webpack-dev-middleware的簡要學習，咱們發現這個中間件也僅僅只是完成了打包文件向服務器的傳輸，沒有實現熱加載也沒有實現熱更新。

這是不能知足開發需求的，因此接下來我要學習一下webpack-hot-middleware了。

連接文章

webpack學習之路（五）loader初識及經常使用loader介紹

webpack學習之路（四）webpack-hot-middleware實現熱更新

webpack學習之路（二）webpack-dev-server實現熱更新

webpack學習之路（一）基礎配置 I am moving forward.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。