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

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

月光魔力鸭

2019-04-19 11:30 阅读 1462 喜欢 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调用imagemagick 的时候发现的一个错误,command failed -- crop .
之前在知乎上有看到,基本上都是一致的,这里提供一个nodejs版本的针对微信内dat文件进行处理恢复为图片的方法。
目前了解的有两个模块可以实现二维码的模块,一个是node-qrcode ,这个算是比较大众的,不过环境比较复杂,所以...连看都没看;还有一个是小众的 qr-image ,这个比较简单,没有其他环境依赖,安装即可用,因为要实现一个简单的在线二维码生成,就先用这个试试水了
关于js的编译和压缩,之前做过一个小工具了,主要就是自己项目成员大都没有这部分的技能,导致发布的时候总需要去编译压缩下.. 最终做了个命令行小工具.. 问题不在这里,前一阵子做压缩的时候发现压缩后竟然是undefined.最终才发现是es6的语法问题。
通过nodejs来进行爬取页面的内容,这里简单试试做个小任务..
前段时间帮朋友下歌放在车上听..结果好多都是ncm格式,伤心 ,搜索了下发现基本上这格式解密有好多昂,可惜UI我都不太想要..决定抄一下,自己做一个。 这里先记录下核心代码,回头补充个UI 做个小程序。
碰到个小需求,本来实现挺简单的,用的electron,开发模式下各种顺畅...半个小时就搞定了,结果倒在了electron打包上..这个坑我应该跳进来了好多次了..
最近有接触到针对二维码进行识别的功能,然后对图片进行位置纠正、二维码扫描,并将数据进行整理。以下是通过nodejs做的,相对简单一些,没有太过严格,识别率也不是很高大约80%左右