新手,刚开始学习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: [

    // Webpack 1.0 
    new webpack.optimize.OccurenceOrderPlugin(),
    // Webpack 2.0 fixed this mispelling 
    // new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
]
至此Js文件的生成已经完成了,但缺少Html,一样不能访问,需要使用'html-webpack-plugin'处理Html文件,复制到内存中。
 
全样式代码
index.js
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进行热重载的更多相关文章

  1. webpack之带有可自动打开浏览器及热重载的基本配置

    什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并 ...

  2. (20/24) webpack实战技巧:watch实现热打包和添加代码备注

    在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要实时进行打包以确保团队间能进行联调或者进 ...

  3. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  4. 【webpack学习笔记】a05-模块热替换

    什么是模块热替换? 这个功能会在程序运行过程中替换.添加或删除模块,而无需重新加载整个页面 有什么用呢? 保留在完全重新加载页面时丢失的应用程序状态. 只更新变更内容,以节省宝贵的开发时间. 调整样式 ...

  5. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  6. vue热重载

    依据官网使用 webpack 的 Hot Module Replacement API,Vuex 支持在开发过程中热重载 mutation.module.action 和 getter.你也可以在 B ...

  7. 从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack 核心概念: Entry: 入口 Module:模块,webpack中一切皆是模块 Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割 Loader:模块转换器, ...

  8. Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览

    github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...

  9. GO学习-(37) 使用Air实现Go程序实时热重载

    使用Air实现Go程序实时热重载 今天我们要介绍一个神器--Air能够实时监听项目的代码文件,在代码发生变更之后自动重新编译并执行,大大提高gin框架项目的开发效率. 为什么需要实时加载? 之前使用P ...

随机推荐

  1. c++ 设计模式3 (重构技法 Template Method)

    1. 重构 面向对象设计模式是“好的面向对象设计”,所谓“好的面向对象设计”指的是那些可以满足 “应对变化,提高复用”的设计. 设计模式的要点是“寻找变化点,然后在变化点处应用设计模式,从而更好地理解 ...

  2. sqoop1.99.4 JAVA API操作

    貌似天国还没有介绍1.99.4的java操作代码的,自己吃一次螃蟹吧 如果你是MAVEN项目 <dependency> <groupId>org.apache.sqoop< ...

  3. WPF 之 布局(二)

    一.Canvas  Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角.可以使用Left ...

  4. label添加手势(触摸改变其背景颜色)

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  5. 【Mood-11】值得学习的国内外Android开发者信息

    国内 Android 开发者信息: 昵称 GitHub 博客 介绍 罗升阳   Luoshengyang@csdn Android 源码分析 邓凡平   innost@csdn 阿拉神农 魏祝林   ...

  6. leetcode题解: Remove Duplicates from Sorted List(已排序单链表去重)

    题目: Given a sorted linked list, delete all duplicates such that each element appear only once. For e ...

  7. Android学习笔记④——页面的布局方式

    FrameLayout(帧布局) 这个布局的特点是简单的默认把每一个视图组件都放在边框内且放在左上角,即使添加多个视图组件,他们也都是重叠在左上角,新的视图会遮挡住旧的视图.可以根据gravity来改 ...

  8. python 基础——变量

    变量赋值 1. 把任意类型的变量[名称]赋值给新的变量,总是增加对象引用,而不是创建新的对象 2. 对于list.dict可变类型,操作的都是同一个对象 3. 使用del删除的是该对象的一个引用,只有 ...

  9. .net4.0中使用ODP.net访问Oracle数据库(无需安装oracle客户端部署方法)

    1.在没有安装oracle客户端的设备上也能访问服务器上的oracle (通俗的讲就是:开发的应用程序 和 oracle数据库服务器分别在两台电脑上)2.不需要配置TnsNames.Ora文件 开发环 ...

  10. Ajax+JSON学习笔记(二)

    来源:http://www.imooc.com/learn/250 readyState属性 0:请求未初始化,open还没有调用 1:服务器连接已建立,open已经调用了 2:请求已接受,也就是接收 ...