webpack开发环境优化： HMR 热加载功能
转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack开发环境优化： HMR 热加载功能
- HMR:hot module replacement 热模块替换/模块热替换
- 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度。
- 样式文件：可以使用HMR功能：因为style-loader内部实现了~
- js文件：默认不能使用HMR功能。【需要修改js代码，添加支持HMR功能的代码】
- 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
- html文件：默认不能使用HMR功能（不用做HMR功能）。
- 问题：同时会导致html文件不能热更新了~
- 解決：修改entry入口；将html文件引入
一、核心配置
在 devServer 配置中开启 HMR 功能
/*
开发环境配置，能让代码运行。
webpack.config.js webpack的配置文件
作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
loader: 1.下载 2.使用(配置loader)
plugins: 1.下载2. 引入 3.使用
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
entry: ['./src/js/index.js','./src/index.html'],
// 输出
output: {
// 输出文件名
filename: 'js/built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
},
// 打包 css 文件的详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
],
},
{
// 问题：默认处理不了 html 中的 img 图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
// 解析时会出问题: [object Module]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]',
// 设置输出目录，将打包的图片资源放到imgs文件夹
outputPath: './imgs',
},
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
options:
{
// 默认情况下,生成使用ES块语法的Js模块
// 问题:生成的图片显示错误
// 解决: esModule改为false
esModule: false,
},
},
{
// 打包其他资源(除了html/js/css资源以外的资源)
// 排除css/is/html资源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:
{
// 给资源进行重命名
// [hash:10]取资源的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10]. [ext]',
// 设置输出目录，将打包的其他资源放到media 文件夹
outputPath: './media',
},
},
],
},
// plugins的配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html',
}),
],
// 模式 development 开发环境，production 生产环境
mode: 'development',
// 生产环境下会自动压缩js代码
// mode: 'production'
// 开发服务器devServer:用来自动化(自动编译, 自动打开浏览器, 自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为: npx webpack-dev-server
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
// 开启 HMR 功能
// 当修改了 webpack 配置，新配置要生效，必须重新启动 webpack devServer
hot: true,
},
};
核心配置
// 开发服务器devServer:用来自动化(自动编译, 自动打开浏览器, 自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为: npx webpack-dev-server
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
// 开启 HMR 功能
// 当修改了 webpack 配置，新配置要生效，必须重新启动 webpack devServer
hot: true,
},
二、解决html不热更新的问题
- html文件：默认不能使用HMR功能（不用做HMR功能）。
- 问题：同时会导致html文件不能热更新了~
- 解決：修改entry入口；将html文件引入
……
// 入口起点文件
// 修改entry入口；将html文件引入，解决开启 HMR 后，html 不热更新的问题。
entry: ['./src/js/index.js','./src/index.html'],
……
三、解决js文件HMR不生效问题
- js文件：默认不能使用HMR功能。【需要修改js代码，添加支持HMR功能的代码】
- 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
- 原因：一旦入口文件被修改，便会加载其导入的其他 js 文件。
## 工程目录如下
.
├── src
│ ├── css
│ │ ├── iconfont.css
│ │ └── index.less
│ ├── imgs
│ │ ├── img.jpg
│ │ ├── img1.jpg
│ │ ├── img2.jpg
│ │ └── img3.jpg
│ ├── index.html
│ ├── js
│ │ ├── iconfont.js
│ │ ├── index.js //入口文件，加载了 myprint.js 依赖
│ │ └── myprint.js //用来做HMR热加载使用的 js 文件
│ └── media
│ ├── iconfont.json
│ └── iconfont.ttf
└── webpack.config.js
// myprint.js 文件
// ./src/js/myprint.js
console.log('myprint.js文件被加载了。');
function myprint(){
const content= 'hello myprint..**';
console.log(content);
}
export default myprint;
// js主入口文件 index.js
// ./src/js/index.js
//入口文件
import myprint from './myprint';
//引入 iconfont 样式文件
import('../css/iconfont.css');
import('../css/index.less');
import('./myprint');
console.log('index.js 文件被加载了');
myprint();
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
if (module.hot) {
// -旦 module.hot 为true，说明开启了HMR功能。
// 让HMR功能代码生效
module.hot.accept('./myprint.js'), function () {
// 方法会监听 myprint.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
// 会执行后面的回调函数
myprint();
}
}
核心配置
// 在 index.js 文件中加入如下 hot 判断，解决 js开启 HMR 后不生效的问题。
……
if (module.hot) {
// -旦 module.hot 为true，说明开启了HMR功能。
// 让HMR功能代码生效
module.hot.accept('./myprint.js'), function () {
// 方法会监听 myprint.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
// 会执行后面的回调函数
myprint();
}
……
四、执行测试
> npx webpack-dev-server
