webpack 之开发环境优化 HMR
webpack 之开发环境优化 HMR
// webpack.config.js
/**
* HMR hot module replacement 热模块替换 / 模块热替换
* 作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块)
* 极大提升构建速度
*
*
* 样式文件:可以使用 HMR 功能:因为 style-loader 内部实现了
* js 文件:默认不能使用 HMR 功能 --> 需要修改js代码,添加支持HMR功能的代码
* 注意:HMR 功能对js的处理,只能处理菲入口js文件的其他文件
* html文件:默认不能使用 HMR 功能,同时会导致问题:html 文件不能热更新了
* 解决:修改entry入口,将html文件引入
*/
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 代码复用loader
const commonCssLoader = [
// 创建 style 标签,将js中的样式资源插入进行,添加到 head 中生效
'style-loader',
// 将css文件变成commonjs 模块加载js中, 里面内容是样式字符串
'css-loader'
]
module.exports = {
// webpack 配置
// 入口起点
entry : ['./src/index.js', './src/index.html'],
// 输出
output : {
// 输出文件名
filename : 'js/built.js',
// 输出路径
path : resolve(__dirname, 'dist')
},
// loader 配置
module : {
rules : [
{
test : /\.css$/, // 匹配哪些文件
//使用哪些 loader 进行处理
use: [
// use 数组中的 loader 执行顺序:从右到左,从下到上依次执行
...commonCssLoader
]
},
{
test : /\.less$/,
use: [
...commonCssLoader,
'less-loader'
]
},
{
test : /\.html$/,
loader : 'html-loader'
}
]
},
// plugins 的配置
plugins : [
// 详细 plugins 的配置
// html-webpack-plugin
// 功能:默认会创建一个空的html文件,自动引入打包输出的所有资源(js/css)
new HtmlWebpackPlugin({
// 增加一个配置
// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(js/css)
template : './src/index.html',
}),
],
//模式
mode : 'development', // 开发模式
// mode : 'production' // 生产模式
devServer: {
// 项目构建后的路径
contentBase : resolve(__dirname, 'dist'),
// 启动 gzip 压缩
compress : true,
// 端口号
port : 3000,
// 自动打开本地默认浏览器
open : true,
// 开启 HMR 功能
hot: true
}
}
// index.js
import print from './print.js'
import './index.css'
const add = (x, y) => x + y;
console.log('add(1, 2)', add(1, 2));
console.log('"object"', "object")
if (module.hot) {
// 一旦 module.hot 为 true,说明开启了 HMR 功能。 --> 让HMR 功能代码生效
module.hot.accept('./print.js', function() {
// 方法会监听 print.js 文件的变化,一旦发生变化,其他模块不会重新打包构建。
// 会执行后面的回调函数
print()
})
}
webpack 之开发环境优化 HMR的更多相关文章
- webpack 之开发环境优化 source-map
webpack 之开发环境优化 source-map /** * source-map:一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误) * [inline ...
- 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo
一.软件及命令: (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可). (2)命令1:npm install cnpm -g 命令2:cnpm install web ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?
现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- webpack(5) -开发环境
使用 source map (仅用于开发环境) 当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置.例如,如果将三个源文件(a.j ...
- webpack前端开发环境搭建
要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...
- 从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
- 搭建 webpack + React 开发环境
说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
随机推荐
- 配置 放上传文件的目录 apache(httpd)
1. 确认服务器 开放8088端口 https://www.apachefriends.org/download.html 下载XAMPP for Windows,安装 2. 修改apache主配置文 ...
- mysql8 navicat远程链接失败
原因:mysql 8加密规则问题 更改加密规则: ALTER USER 'ycc'@'%' IDENTIFIED BY 'you password' PASSWORD EXPIRE NEVER; 修改 ...
- web带宽估算方法
每个连接约占用10Kb的带宽,以3万总用户数和10%的在线率计算,并按照10%的冗余率,服务器总带宽=每秒总连接数*10Kbps /(1-冗余率)/1024. 带宽占用(Mbps)=30000*10% ...
- P7405-[JOI 2021 Final]雪玉【二分】
正题 题目链接:https://www.luogu.com.cn/problem/P7405 题目大意 \(n\)个点在坐标轴上,\(q\)次每次所有点向一个方向移动若干步,每个点的权值是它第一次覆盖 ...
- Loj#143-[模板]质数判定【Miller-Rabin】
正题 题目链接:https://loj.ac/p/143 题目大意 给出一个数\(p\),让你判定是否为质数. 解题思路 \(Miller-Rabin\)是一种基于费马小定理和二次探测定理的具有较高正 ...
- 深度学习--GAN学习笔记
生成模型 WGAN Blog GAN 推荐学习网站 生成模型 什么是生成模型? GMM: 用来做聚类,(非监督学习) NB(朴素贝叶斯):(监督学习,可以用来做垃圾邮件分类) Logistics 回归 ...
- 1.pytest初尝试
语法规范 pytest命令会默认执行以 -- test_**.py -- 或 -- **_test.py -- 命名文件的测试用例 pytest的测试用例必须以 -- test -- 开头 def t ...
- Redis高可用解决方案:哨兵(Sentinel)
哨兵是Redis的高可用解决方案:由多个哨兵组成的系统监视主从服务器,可以将下线的主服务器属下的某个从服 务器升级为新的主服务器,继续保障运行. 启动并初始化Sentinel redis-sentin ...
- HCNP Routing&Switching之路由引入导致的问题及解决方案
前文我们了解了路由引入相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15359902.html:今天我们来讨论下由于路由引入所导致的问题以及怎么避免此 ...
- 通用脱敏工具类和判断URL
通用脱敏工具类 public class DesensitizationUtil { private static final int SIZE = 6; private static final S ...