webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别源码中的模块化导入语句，递归查找入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中
默认入口：src/index.js
默认输入：dist/main.js
默认支持多种模块化类型，如commonJS、esmodule、AMD
默认支持js模块和json模块
webpack配置文件：webpack.config.js
webpack基于node，所以其配置文件遵循CommonJS规范，通过 module.exports 导出一个对象
处理JS文件中引入的 xxx.css
css-loader
style-loader
css-loader 通过CSS in JS模式，把xxx.css中的CSS内容打包到JS中
style-loader 在 <header> 下动态创建 <style>，并把CSS插入标签内
注意：默认情况下，每引入一个xxx.css，便会生成一个<style>
配置style-loader，合并<style>
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
}
}
Plugins
扩展插件，在webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果，作用于整个构建过程。
通常希望把CSS导出一个独立的文件，那么就不能使用style-loader了，而是借助插件MiniCssExtractPlugin
// module
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader', // 加兼容性的前缀
'less-loader' // 预处理less
]
}
// plugins
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[chunkhash:8].css' // 配置导出CSS文件的名称
})
]
sourceMap 源代码与打包代码的映射关系，通过sourceMap定位到源代码
在development模式下，默认开启。
关闭的话在 webpack.config.js 中配置
devtool: "none"
WebpackDevServer：WDS
提升开发效率的利器：每次修改代码都要重新打包，刷新浏览器，使用WebpackDevServer来改善这方面的体验。
WDS是一个运行在内存中的开发服务器(一个express)，启动之后，它会检测文件是否发生改变并自动编译、刷新
npm i webpack-dev-server -D
// package.json
"scripts": {
"server": "webpack-dev-server"
}
//webpack.config.js
devServer: {
contentBase: "./dist",
port: 8081,
open: true
}
contentBase 设置服务启动后的资源地址
port 服务的端口号
open 启动服务时，自动打开浏览器
执行 npm run server 开启服务，会发现本地没有了dist目录，这是因为WDS把打包文件放于内存中，提升运行效率。
在前端项目中自己创建一个Mock服务
npm i express -D
在项目根目录下创建server.js
const express = require('express')
const app = express()
app.get('/api/info', (req, res) => {
res.json({
name: 'webpack',
age: 5
})
})
app.listen('9092')
启动：node server.js
devServer 配置跨域
devServer: {
//...
proxy: {
"/api": {
target: "http://localhost:9092"
}
}
}
HMR：热模块更新，webpack的自带插件
WDS每次重新编译都会自动刷新浏览器，也就造成当前状态的丢失问题
HMR 只刷新项目中的模块，不刷新浏览器，能够保留当前状态
const webpack = require('webpack')
devServer: {
// ...
hot: true,
hotOnly: true // 热更新不要刷新浏览器
}
plugins: [
// ...
new webpack.HotModuleReplacementPlugin()
]
HMR 默认只支持 style-loader 处理的CSS(动态创建<style>标签)，不支持MiniCssExtractPlugin处理的CSS(抽离成独立的CSS文件)，而且对JS模块的修改检测不友好
JS模块需要手动设置HMR监听的模块：
if(module.hot) { // 判断HMR是否存在
// 设置HMR监听的模块
module.hot.accept('./number.js', () => {
// 监听模块发生变化的回调
})
}
HMR 会对每个模块生成一个唯一ID，当某个模块的内容发生变化时，HMR会先移除这个模块，再重新编译生成，最后触发监听回调。由开发者在回调中去处理相关页面更新。
但是对于Vue、React等框架，并不需要手动监听JS模块，这是因为它们提供的相关loader 可以使HMR与各种框架和库平滑地进行交互
- React Hot Loader 实时调整React组件
- Vue Loader Vue组件的HMR，开箱即用
- Elm Hot Loader 支持Elm编程语言的HMR
- Angular HMR 不需要使用loader，直接修改主文件NgModule 即可，它可以完全控制HMR API
网友评论