基础篇——webpack基础用法（三）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基础篇——webpack基础用法（三）相关的知识，希望对你有一定的参考价值。
参考技术A上一章节主要介绍了 entry 、 output 、 loaders 、 plugins 、 mode 等核心概念以及简单的使用方法的介绍，接下来主要介绍文件的解析、压缩、热更新原理等。
安装url-loader
npm install url-loader -D
上图是自己写的demo，在search.js中引用图片资源，此示例为未使用url-loader时文件大小 134kb ；
上一节中讲解了 webpack文件监听 可以实现文件的自动构建，但是每次必须手动刷新浏览器，那么有没有不用每次手动刷新浏览器，自动构建文件呢？答案是肯定的， 热更新 。
注意：WDS因为是放在内存中，而watch是有对系统进行文件的输出，所以在构建速度上WDS也是明显快于watch的
接下来我们实际操作一下：
在package.json中添加一个dev命令，配置好webpack-dev-server;
npm i webpack-dev-server -D
修改webpack.config.js中的 mode 为 development ，因为 production 是生产环境下使用的，而 development 是开发环境下使用的，所以在使用WDS的情况下，要将mode修改为 development ；
配置 HotModuleReplacementPlugin 插件和 devServer ，因为HotModuleReplacementPlugin是webpack内置插件，所以不用额外安装的。
注：通常适用express、koa等后端服务，需要引用nodejs
注：一般js用Chunhash，css用Contenthash
到这里 webpack基础篇 已经讲完了，下一章节开始 webpack进阶篇
[ 基础漏洞篇 ] webpack 前端源码泄露详解
以上是关于基础篇——webpack基础用法（三）的主要内容，如果未能解决你的问题，请参考以下文章