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 ...
随机推荐
- python django 基本测试 及调试
#########20181110from django.db import modelsfrom blog.models import Article, Author, TagAuthor.obje ...
- REQUIRED与REQUIRED_NEW
出处: https://blog.csdn.net/selfsojourner/article/details/74561745 spring 事务的传播行为中,有两个容易混淆的行为:REQUIRED ...
- requirej入门(二)
requirejs中的一些基本知识,包括API使用方式等. 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs, ...
- Unity 物体旋转会发生变形
当游戏对象的 "父物体们" 有一个是缩放的,也就是Scale不是(1,1,1)的时候,旋转这个游戏对象它就会出现变形的现象.
- Murano Application
OpenStack Application Link: http://apps.openstack.org/ Those applications include Murano packages, H ...
- java多线程通过管道流实现不同线程之间的通信
java中的管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据.一个线程发送数据到输出管道,另外一个线程从输入管道中读取数据.通过使用管道,实现不同线程间的通信,而不必借助类似 ...
- 2019.3.26判断是否回文(java实现)
我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...
- 如何使用JWT来实现单点登录功能
我们平时自己开发项目,分布式的结构时,访问量不大,但是又不想搭建redis服务器,这时我觉得jwt不错. 个人理解,jwt就是类似于一把锁和钥匙,客户来租房(登录),我们需要给他进来(第一次登录)登记 ...
- Windows之CMD查看系统信息
Windows 系统通过命令行(CMD)查询系统信息有两种方式: 1.图形化界面: 在“运行”中键入CMD,然后输入 dxdiag,回车后弹出图形化界面 ------ DirectX 诊断工具. 2. ...
- Wallet address
BCX XZVYYwXFAJwv6x4KTssQxJb4EReVdCBnpb BCD 1DNSFUD7LURZdmbckkQcxMvinNJ26mVcNH