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的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
随机推荐
- SAP Shared Object 01 (共享对象)
介绍 共享对象是在共享内存中的一个对象.共享内存是应用服务器中的一个内存区域,可以被应用服务器中的所有程序访问. 在共享对象出现之前,ABAP使用EXPORT 和 IMPORT语句实现内存区域中内容的 ...
- Hive语法及其进阶(一)
1.Hive完整建表 1 CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name( 2 [(col_name data_type [COMMENT col ...
- 《集体智慧编程学习笔记》——Chapter2:提供推荐
知识点: 1. 协作型过滤--Collaboraive Filtering 通常的做法是对一群人进行搜索,并从中找出与我们品味相近的一小群人,算法会对这些人的偏好进行考察,并将它们组合起来构造出一个经 ...
- Django整理(五) - 请求与响应 - request对象
请求对象 一.客户端传参的几种方式 1. 通过URL路径(path)传递,例如:http://127.0.0.1:8000/news/1/2,两个参数:id和page 2. 通过 query stri ...
- mysql从零开始之MySQL 教程
MySQL 教程 MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System:关系数 ...
- spring 创建Bean最全实现方法
创建bean方式,spring创建bean的方式包含:自动注入方式和人工注入方式.分别为:1)xml 配置化方式 2)@bean注解注入方式3)@Component方式 4)接口注入方式 5)imp ...
- js高阶
1. 面向对象编程介绍 1.1 两大编程思想 --- 面向过程 --- 面向对象 1.2 面向过程编程 POP 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候在一 ...
- Endian
Endian 寻址 多字节对象被存储为连续的字节序列,对象的地址为所使用字节中最小的地址. 例如,假设一个类型为 int 的变量 a 的地址为 0x100,也就是说,地址表达式 &a 的值为 ...
- C语言对"不定长"字符串数组的遍历
一般来说,c语言的数组的初始化可以通过三种方式: {0},在声明时使用,如 int a[10]={0} 使用memset, memset(array,0,sizeof(array)) 用for循环赋值 ...
- IEEE754浮点数的转换
将十进制数转换为单精度浮点数 如何将十进制数转换为单精度浮点数参考 首先要知道 IEEE浮点标准:V=(-1)^s * M * 2^E 1.符号(sign)s决定这个数是负数(s=1)还是正数,0(s ...