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

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

月光魔力鸭

2019-04-19 11:30 阅读 1094 喜欢 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连接ftp,进行ftp的操作,包括列表、上传、下载以及速率等。
当我们做爬虫或其他的一些应用的时候,如果需要一些短信验证,但是又没有那么多手机号,又不能放人在那里一直输入的时候?怎么办?
在平时nodejs练习过程中,可能会安装多个不同版本的nodejs,那么我们如何来轻松的管理和切换呢?推荐你一个nvm来试试水
从豆瓣转到网易云后,发现了不少好听的歌曲,然鹅..当我想把这些歌拿下来扔车上听的时候发现竟然不允许下载..能听不能下?这不科学,作为一名程序猿,必然要迎难而上啊.
写文章总会需要一些素材,但是好多素材都是收费或有限制的,还是我要求不高,在千库网看了下还不错,有各签到还送VIP,于是就有了想法....
想做微信/支付宝支付很久了..奈何需要的资质太多,只能慢慢申请,等待,审核..终于下来了。