webpack 4.x 基本配置以及通过webpack-hot-middleware 实现自动刷新

webpack 4.x 基本配置以及通过webpack-hot-middleware 实现自动刷新

月光魔力鸭

2019-04-19 11:30 阅读 1270 喜欢 1 webpack4.x webpack-hot-middleware reload

开始入手webpack ,直接看的官方文档和demo,对于自动刷新这部分还是希望通过express 加载插件来控制,但是文档没有提供,经过参考github上其他高玩的套路,最终整理了一个基础的配置版本。

问题

webpack.NoErrorsPlugin is not a constructor

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor

//解决方法:去掉。这两个方法在1.x 和 2.x才能使用。

目录结构

webpack.config.js 基础配置

//webpack config file
const path = require('path')
const webpack = require('webpack')
//自动生成html,或依赖模版
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')


module.exports= {
    mode : 'development',
    //⭐⭐⭐ entry 此处需要注意,在app print 里面增加dev-client,具体内容在下面。
    entry : {
        app : ['./build/dev-client','./src/index.js'],
        print : ['./build/dev-client','./src/print.js']
    },
    output : {
        path : path.resolve(__dirname,'dist'),
        filename : '[name].bundle.js',
        publicPath : '/'
    },
    devtool : 'inline-source-map',
    devServer : {
        contentBase : './dist',
        port : '9999'
    },
    plugins : [
        //HMR
        // new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // new webpack.NoErrorsPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title : '管理输出啊'
        })

    ],
    module : {
        rules : [
            {
                test : /\.css$/,
                use : [
                    'style-loader',
                    'css-loader'
                ]
            },{
                test : /\.(png|jpg|gif|svg)$/,
                use : ['file-loader']
            },{
                test : /\.(woff|woff2|eot|ttf|otf)$/,
                use : ['file-loader']
            }
        ]
    }
}

express 服务端编码

const express = require('express');
const webpack = require('webpack')
const webpackMiddleWare =require('webpack-dev-middleware')
const app = express();
const config = require('./webpack.config')
const compiler = webpack(config)
app.use(webpackMiddleWare(compiler,{
    publicPath : config.output.publicPath
}))

app.use(require('webpack-hot-middleware')(compiler))
let port = 9999;
app.listen(port,()=>{
    console.log(`server is running at port ${port}`);
})

dev-client.js 编码

require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function(event) {
    if (event.action === 'reload') {
        window.location.reload()
    }
})

src/index.js src/print.js

这两个文件与官网一致,随便写几个即可。

package.json

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "server": " node ./build/dev"
  },
  "author": "chrunlee",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "eventsource-polyfill": "^0.9.6",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack-dev-server": "^3.3.1",
    "webpack-hot-middleware": "^2.24.3"
  },
  "dependencies": {
    "jquery": "^3.4.0",
    "lodash": "^4.17.11",
    "webpack": "^4.30.0"
  }
}

以上


这里面主要要注意的就是 webpack.config 内的 entry即可。 代码下载 : http://res.chrunlee.cn/static/2019/4/15556443284321548.zip

转载请注明出处: https://chrunlee.cn/article/webpack-hot-middleware-reload.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
在开发项目过程中,经常需要将开发的项目部署到服务器上,但是每个环境都有每个环境的配置等等,如果每次打包的时候都要去调整(可能删除、替换等),那就很烦人了,这里分享下自己实现的几个简单的小工具(当然这个工具可能只对我自己有用),希望能够帮到你。
之前在知乎上有看到,基本上都是一致的,这里提供一个nodejs版本的针对微信内dat文件进行处理恢复为图片的方法。
互联网应用经常需要存储用户上传的图片,比如facebook相册。 facebook目前存储了2600亿张照片,总大小为20PB,每张照片约为80KB。用户每周新增照片数量为10亿。(总大小60TB),平均每秒新增3500张照片(3500次写请求),读操作峰值可以达到每秒百万次
使用nodejs 连接mysql数据库还是很简单的,有现成的模块可以直接调用。下面介绍下 mysql 的调用
从豆瓣转到网易云后,发现了不少好听的歌曲,然鹅..当我想把这些歌拿下来扔车上听的时候发现竟然不允许下载..能听不能下?这不科学,作为一名程序猿,必然要迎难而上啊.
这事其实很简单,就是调用adb几个命令而已.. 主要是有时候想用的时候总感觉差点啥,东拼西凑才弄出来,这里记录下,哪怕就是贴个地址的,也比记在脑子里强。
前几天给朋友帮忙,想要一个一模一样的网站...自告奋勇去帮忙.. 结果发现之前一直没处理过类似的情况,虽然也写过爬虫,不过看了下网站,也不算麻烦。于是简单实现了这个自动抓站的功能,最终整理成为一个自动抓站的工具,能省很多的事情。
对于开发来说,看到别人家的小程序都这么靓,这么顺畅,这么好用,用户又多... 自然是眼馋的..用户馋不来,可以先馋他的身子..啊不,代码啊。