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

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

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
在使用puppeteer 跳转窗口的时候,发现waitForNavigator 并不起作用,最后找到通过browser 获得page 并继续操作。
在日常开发中,经常会频繁的做一些重复性的操作,作为一名程序员,解放双手的时刻到了
通过nodejs来进行爬取页面的内容,这里简单试试做个小任务..
通过node-xlsx模块读取excel和写入
最近由于系统需要一些数据进行测试,但是正常的流程都是下载pdf ,打印pdf,然后通过涂写答题卡,将涂写的扫描上传..太麻烦了,想做成简单点,通过程序直接生成..卡在了pdf转图片上,今天抽空找了下库,通过gm可以将pdf转为图片,起码第一步已经实现了,后边的涂学号之前已经做过了。
在使用marked来做md解析的时候,部分解析规则可能并不是很如意,比如说,我在md中写了a标签,但是这些标签都是在当前页面替换的,而我想要的是新打开窗口。
目前了解的有两个模块可以实现二维码的模块,一个是node-qrcode ,这个算是比较大众的,不过环境比较复杂,所以...连看都没看;还有一个是小众的 qr-image ,这个比较简单,没有其他环境依赖,安装即可用,因为要实现一个简单的在线二维码生成,就先用这个试试水了