webpack-dev-middleware插件的使用

我们在使用webpack 编译文件时，每次改动文件都要去重新编译，是不是很麻烦，这时候我们就用到了webpack-dev-middleware 插件，该插件对更改的文件进行监控，编译, 一般和 webpack-hot-middleware 配合使用，实现热加载功能

这里怎么安装我不在说，

github地址：
https://github.com/webpack/webpack-dev-middleware

练习代码地址: (webpackDevMiddleware 文件夹,下载执行命令即可)
https://github.com/webxiaoma/webpack-domes

使用方法

一、文件目录

二、安装

webpack, webpack-dev-middleware, style-loader, css-loader

三、文件内容

1.index.js

import index from '../css/index.css';


var sub = require('./sub'); var app = document.createElement('div'); app.innerHTML = '<h1>Hello World h1</h1>'; app.appen

2.sub.js

function generateText() { 　　var element = document.createElement('h2'); element.id = "twoH" 　　element.innerHTML = "Hello h2 world h2"; 　　return element; } module.exports = generateText; 

3.index.css

#twoH{
  color:blue;
  font-size:26px; }

4.webpack.config.js

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); //定义了一些文件夹的路径 const ROOT_PATH = path.resolve(__dirname); const APP_PATH = path.resolve(ROOT_PATH, 'app'); const BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字 entry: APP_PATH, //输出的文件名 合并以后的js会命名为bundle.js output: { path: BUILD_PATH, filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件 }, module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] }, ] }, //添加我们的插件 会自动生成一个html文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' }),//在build目录下自动生成index.html，指定其title ], };

5.server.js

const path = require("path")
const express = require("express") const webpack = require("webpack") 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, { // 这里是对 webpackDevMiddleware 的一些配置，具体其他配置我们下面已经列出来了。 //绑定中间件的公共路径,与webpack配置的路径相同 publicPath: webpackConfig.output.publicPath, quiet: true //向控制台显示任何内容 })) // 这个方法和下边注释的方法作用一样，就是设置访问静态文件的路径 app.use(express.static(DIST_DIR)) // 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,function(){ console.log("成功启动：localhost:"+ PORT) })

文件都写好了我们，可以直接执行 node server,我们也可以在 package.json中制定命令

 "scripts": {
    "start": "node server.js"
  },

然后运行npm start,之后我们会在命令行中看到，

然后我们打开 http://localhost:9090

当我我们修改index.js、sub.js、 index.css 中的内容时，webpack会自动给我们编译文件，我们刷新浏览器就可以看到，编译后的文件。编编译的文件是放在内存中的，我们的实际文件中并不会看到，到这里，我们肯会想，如果我们保存之后，文件被编译好，浏览器自动刷新多好，这时我们就用到了 webpack-hot-middleware 插件，这个功能的实现请访问文章

webpack-hot-middleware 插件

webpack-dev-middleware的其它配置项

app.use(webpackDevMiddleware(webpack, {
     
    //这里options的一些配置见下表
}))

options: (这里只有publicPath 是必需的，而所有其他选项都是可选的 )

noInfo: false,
//  显示无信息到控制台（仅警告和错误） 

quiet: false, // 向控制台显示任何内容  lazy: true, // 切换到延迟模式 // 这意味着没有观看，而是重新编译每个请求  watchOptions: { aggregateTimeout: 300, poll: true }, // watch options (only lazy: false)  publicPath: "/assets/", // 绑定中间件的公共路径 // 使用与webpack相同  index: "index.html", // Web服务器的索引路径，默认为“index.html”。 // 如果falsy（但不是未定义），服务器将不会响应到根URL的请求。  headers: { "X-Custom-Header": "yes" }, // 自定义标题  mimeTypes: { "text/html": [ "phtml" ] }, // 添加自定义mime /扩展映射 // https://github.com/broofa/node-mime#mimedefine // https://github.com/webpack/webpack-dev-middleware/pull/150  stats: {  colors: true }, // 用于形成统计信息的选项  reporter: null, // 提供自定义记录器来更改日志显示的方式。  serverSideRender: false, // 关闭服务器端渲染模式。有关详细信息，请参阅服务器端渲染部分。

更加高级的API请访问：

https://github.com/webpack/webpack-dev-middleware

 

转载：https://segmentfault.com/a/1190000011761306

转载于:https://www.cnblogs.com/renyunbo/p/10795558.html