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的更多相关文章

  1. webpack 之开发环境优化 source-map

    webpack 之开发环境优化 source-map /** * source-map:一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误) * [inline ...

  2. 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo

    一.软件及命令: (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可). (2)命令1:npm install cnpm -g 命令2:cnpm install web ...

  3. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  4. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  5. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  6. webpack(5) -开发环境

    使用 source map (仅用于开发环境) 当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置.例如,如果将三个源文件(a.j ...

  7. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  8. 从零开始搭建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 ...

  9. 搭建 webpack + React 开发环境

    说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...

随机推荐

  1. AT2667-[AGC017D]Game on Tree【SG函数】

    正题 题目链接:https://www.luogu.com.cn/problem/AT2667 题目大意 给出\(n\)个点的一棵树,每次可以割掉一条和根节点联通的边,轮流操作直到不能操作的输,求是否 ...

  2. PyCharm中文下载与安装教程【2021年更新】

    第一章:下载与安装 1.1   [版本介绍]多个版本的介绍与选择 Jetbrain 公司是一家专业的 IDE 生产商,只要是市面上主流的编程语言,Jetbrain 都有相应的产品. 比如:Python ...

  3. Notepad++离线安装使用Markdown插件

    1.介绍 MarkdownViewerPlusPlus是Notepad++的Markdown插件, 这个Markdown插件可以在Notepad++中实时动态渲染, 可以同步查看使用Markdown的 ...

  4. Skywalking-13:Skywalking模块加载机制

    模块加载机制 基本概述 Module 是 Skywalking 在 OAP 提供的一种管理功能特性的机制.通过 Module 机制,可以方便的定义模块,并且可以提供多种实现,在配置文件中任意选择实现. ...

  5. CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中.通过本文,你 ...

  6. t-SNE算法

    t-SNE 算法 前言 t-SNE(t-distributed stochastic neighbor embedding) 是用于降维的一种机器学习算法,由 Laurens van der Maat ...

  7. Java实现红黑树(平衡二叉树)

    前言 在实现红黑树之前,我们先来了解一下符号表. 符号表的描述借鉴了Algorithms第四版,详情在:https://algs4.cs.princeton.edu/home/ 符号表有时候被称为字典 ...

  8. 题解 Christmas Game

    题目传送门 题目大意 给出 \(t\) 个 \(n\) 个点 \(m\) 条边的无向图,每次可以从任意一棵树选择一条边删掉,然后该树不与根(为 \(1\) )联通的部分被删掉.不能操作的人输.问谁有必 ...

  9. L1-017 到底有多二 (15 分) java解题

    1 import java.util.Scanner; 2 3 public class Main { 4 public static void main(String args[]){ 5 doub ...

  10. Redis 基础数据类型重温

    有一天你突然收到一条线上告警:Redis 内存使用率 85%.你吓坏了赶紧先进行扩容然后再去分析 big key.等你进行完这一系列操作之后老板叫你去复盘,期间你们聊到了业务的数据存储在 Redis ...