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

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

月光魔力鸭

2019-04-19 11:30 阅读 2007 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
从豆瓣转到网易云后,发现了不少好听的歌曲,然鹅..当我想把这些歌拿下来扔车上听的时候发现竟然不允许下载..能听不能下?这不科学,作为一名程序猿,必然要迎难而上啊.
通过imap 来接收邮箱新邮件,类似客户端系列,不过比较简单的,目前只有新邮件,后续也可以通过这个来做一个自己的邮件客户端。
获取文件夹内所有的文件。支持递归获取、异步或同步、过滤、返回信息处理。
最近有接触到针对二维码进行识别的功能,然后对图片进行位置纠正、二维码扫描,并将数据进行整理。以下是通过nodejs做的,相对简单一些,没有太过严格,识别率也不是很高大约80%左右
在开发的时候,经常会有css js 文件的变更,然后部署后发现没有起到作用,最终发现是缓存的问题,如何来方便的解决
最近由于系统需要一些数据进行测试,但是正常的流程都是下载pdf ,打印pdf,然后通过涂写答题卡,将涂写的扫描上传..太麻烦了,想做成简单点,通过程序直接生成..卡在了pdf转图片上,今天抽空找了下库,通过gm可以将pdf转为图片,起码第一步已经实现了,后边的涂学号之前已经做过了。
发布自己的nodejs应用后,需要进行管理,目前一般都pm2来进行管理,这里记录下常用的命令。
互联网应用经常需要存储用户上传的图片,比如facebook相册。 facebook目前存储了2600亿张照片,总大小为20PB,每张照片约为80KB。用户每周新增照片数量为10亿。(总大小60TB),平均每秒新增3500张照片(3500次写请求),读操作峰值可以达到每秒百万次