webpack使用webpack-dev-middleware进行热重载
新手,刚开始学习webpack,想使用webdevserver,但定制性太差,于是研究了一下使用webpack-dev-middleware进行指定。
根据文档https://www.npmjs.com/package/webpack-hot-middleware
需要配置entry和output.
常规配置
entry: ['./src/main.js'],
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].[hash].js',
},
但在热重载中,文件是不存放在硬盘上的,而是使用了memory-fs模块存放在内存中的,因此原始规则不能使用了。
查看与webpack-dev-middleware配合需要使用到webpack-hot-middleware,在内存中使用时需要为入口文件添加一个'webpack-hot-middleware/client',
同时输出的文件也和原来不同,文件不再带有根目录,因此,Path和publicpath均需要修改,结果如下:
entry: {
app:[
'webpack-hot-middleware/client',
'./src/main.js'
],
},
output: {
path: '/',
// publicPath: '/'
},
同时还需要添加相应的热重载插件:
plugins: [
let express = require('express');
let webpack = require("webpack");
const fs = require('fs')
let app = express()
let port; let webpackconfig = require('./build/webpack.dev.config');
webpackconfig(app)
app.use(express.static('./static'));
app.get('/', function(req, res, next){
next();
}) app.listen(port || 9999, function(e){
console.log(`server start at ${port}`);
});
webpack.base.config.js
var webpack = require("webpack");
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: ['./src/main.js'],
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].[hash].js',
},
module: {
rules:[
{
test: /\.js/,
include:[path.resolve(__dirname,'src')],
loader: 'babel',
options: {
presets: 'es2015',
}
},
{
test: /\.vue/,
loader: 'vue',
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
extensions: ['.vue','.js', 'json', ' '],
alias: {
'components': './src/',
}
},
}
webpack.dev.config.js
let webpack = require("webpack");
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let devMiddleWare = require('webpack-dev-middleware');
let hotMiddleWare = require('webpack-hot-middleware');
let baseConfig = require('./webpack.base.config');
let devOption = {
entry: {
app:[
'webpack-hot-middleware/client',
'./src/main.js'
],
},
output: {
path: '/',
// publicPath: '/'
},
plugins: [
// new webpack.optimize.OccurenceOrderPlugin(),
// Webpack 2.0 fixed this mispelling
// new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
]
}
module.exports = function(app){
let webpackconfig = Object.assign({}, baseConfig, devOption);// console.log(webpackconfig);
var compiler = webpack(webpackconfig);// console.log(compiler);
app.use(devMiddleWare(compiler,{
publicPath: webpackconfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
}));
app.use(hotMiddleWare(compiler));
return app;
}
webpack使用webpack-dev-middleware进行热重载的更多相关文章
- webpack之带有可自动打开浏览器及热重载的基本配置
什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并 ...
- (20/24) webpack实战技巧:watch实现热打包和添加代码备注
在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要实时进行打包以确保团队间能进行联调或者进 ...
- webpack 教程 那些事儿03-webpack两大精华插件,热加载
本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...
- 【webpack学习笔记】a05-模块热替换
什么是模块热替换? 这个功能会在程序运行过程中替换.添加或删除模块,而无需重新加载整个页面 有什么用呢? 保留在完全重新加载页面时丢失的应用程序状态. 只更新变更内容,以节省宝贵的开发时间. 调整样式 ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
- vue热重载
依据官网使用 webpack 的 Hot Module Replacement API,Vuex 支持在开发过程中热重载 mutation.module.action 和 getter.你也可以在 B ...
- 从零开始配置webpack(基于webpack 4 和 babel 7版本)
webpack 核心概念: Entry: 入口 Module:模块,webpack中一切皆是模块 Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割 Loader:模块转换器, ...
- Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览
github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...
- GO学习-(37) 使用Air实现Go程序实时热重载
使用Air实现Go程序实时热重载 今天我们要介绍一个神器--Air能够实时监听项目的代码文件,在代码发生变更之后自动重新编译并执行,大大提高gin框架项目的开发效率. 为什么需要实时加载? 之前使用P ...
随机推荐
- LeetCode46,47 Permutations, Permutations II
题目: LeetCode46 I Given a collection of distinct numbers, return all possible permutations. (Medium) ...
- Android 高级UI设计笔记18:实现圆角图片
1. 下面我们经常在APP中看到的圆角图片,如下: 再比如:微信聊天会话列表的头像是圆角的. 2. 下面分析一个Github的经典: (1)Github库地址: https://github.com/ ...
- Android 高级UI设计笔记12:ImageSwitcher图片切换器
1. ImageSwitcher ImageSwitcher是Android中控制图片展示效果的一个控件,如:幻灯片效果...,颇有感觉啊.做相册一绝 2. 重要方法 setImageURI(Uri ...
- 【Shell脚本学习20】Shell until循环
until 循环执行一系列命令直至条件为 true 时停止.until 循环与 while 循环在处理方式上刚好相反.一般while循环优于until循环,但在某些时候,也只是极少数情况下,until ...
- 解决eclipse下pydev的unresolved import的问题
有些模块,比如PIL,已经装入过,但是在pydev中无法自动提示,甚至有报 unresolved import的问题,虽然不会引起运行时问题,但是无法实现自动提示,还是一件很麻烦的事情. 下面有个 ...
- IOS之代理
作者:王泽豪 时间:2016年4月22日 ★代理是一种设计模式,它的价值在于通过一个统一的模式,解决一个原本并不方便.甚至是几乎不可能解决的问题. ★代理有两个关注点: ...
- ubtntu怎么安装myeclipse
1.下载jdk.tar.gz文件 2.解压jdk 命令:$sudo tar zxvf ./jdk.tar.gz 3.将解压后的jdk放在/usr/lib/jvm下 4.查看本机是否还有jiava可选 ...
- python 调用mysql存储过程返回结果集
存储过程: delimiter | ),)) begin select * from tb_test where mid = imid and user = iuser; end; | delimit ...
- Linux 驱动分类 与访问技术
驱动开发概述 1.驱动分类 1.1 常规分析法 1.1.1 字符设备 字符设备是一种按字节来访问的设备,字符驱动则负责驱动字符设备, 这样的驱动通常实现open, close, read和wri ...
- 使用OLEDB读取excel和csv文件
这是我第一次在博客上写东西,简单的为大家分享一个oledb读取文件的功能吧,这两天在做一个文件导入数据库的小demo,就想着导入前先在页面上展示一下,之前调用Microsoft.Office.Inte ...