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.appen2.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-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
