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-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
webpack-dev-middleware插件的使用的更多相关文章
- webpack常用的插件安装命令
webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...
- vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- webpack.dev.conf.js详解
转载自:https://www.cnblogs.com/ye-hcj/p/7087205.html webpack.dev.conf.js详解 //引入当前目录下的utils.js文件模块var ut ...
- vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)
最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...
- vue-cli脚手架build目录中的webpack.dev.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...
- npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1
internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...
- vue -- 脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- webpack进阶之插件篇
一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...
- webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...
随机推荐
- JavaSE---关键字---return,break,continue
1.[break] 1.1 默认 用来结束 整个循环: package com.exiuge.mytest; public class BreakTest { public static vo ...
- MVC 路由检测组件 Routing Debugger
组件下载地址 haacked.com 1.在mvc项目中引入组件 2.配置route规则 public static void RegisterRoutes(RouteCollection route ...
- UGUI RectTransform 矩形变换
UGUI游戏对象基本都有这个组件. float radius; radius = GetComponent<RectTransform>().sizeDelta.x; radius = ( ...
- Sqlite操作的一些关键类的官方说明与Intent的startactivityforresult方法
Intent: 该功能可以用于通过intent来跳转界面时候传递信号给原理的页面,以便做出一些处理: sqlite的使用: 该方法得到的sqlitedatabase可读可写,而getreadabled ...
- MATLAB矩阵操作和算术运算符
矩阵的表示 矩阵之间用空格或者是逗号间隔 矩阵可以拼接(可以用矩阵拼接) 实部矩阵和虚部矩阵构成复数矩阵,一一对应. 冒号表达式: 格式: e1:e2:e3 e1表示初始值 e2表示步长 e ...
- 基于vue-cli 将webpack3 升级到 webpack4 配置
升级webpack4前 先删除之前的webpack, babel-loader 下载 webpack npm i -D webpack@4 webpack-cli@3 webpack-dev- ...
- Python常用模块(三)
一.shelve模块 shelve也是一种序列化方式,在python中shelve模块提供了基本的存储操作,shelve中的open函数在调用的事和返回一个shelf对象,通过该对象可以存储内容,即像 ...
- [持续更新] Linux基础的重要命令
命令总结:100个左右 mkdir 方法一 [root@localhost ~]# mkdir /test && ls -ld /test 方法二 [root@localhost ~] ...
- Oracle的oci.dll加载错误解决办法
开始 -> 程序 -> Oracle -> Configuration and Migration Tools -> Net Manager→本地→概要文件→Oracle高级安 ...
- 【工作】Proxy Server的优化 - 检测目标网站URL变化
在工作中,我在组里负责一个Proxy(代理)的Module,这个Module是针对微软的Office 365的邮件门户OWA实现,工作起来后,用户访问Office 365 OWA,无需再输入Offic ...