1. 各种loader
file-loader, 资源文件迁移
url-loader 文件转化成base64 url
css-loader 解析css
style-loader 生成style, 嵌入header
cleanPkugin变成 output：{ clean：true }
2. webpack-dev-server与hmr
// 一般来讲webpack-dev-server会有live load， webpack-dev-server是把资源打包到内存。
意思是说 有文件发生改变时， 全项目自动更新， webpack-dev-server内部配了websocket， 所以可以与页面交互，全局更新。这样的问题是比如input的内容填过了， 一刷新， 就没了。
hmr是基于webpack-dev-server的配置， 只对影响的文件更新
dev-server {
port:3000,
hot:true,
hotOnly: true
}
所以对于某些组件， 可以这样写
import popup from ‘./popup.js’
if(module.hot) {
module.hot.accept(‘./page2.js‘, ()=>{
document.click = popup
})
}
3.在production和development的配置
webpack-merge负责配置的merge
mode：Prouction
其实内部是配置了， optimision: { mimifiy: true }, devtool：‘’eval‘’等
4.webpack的优化策略，
4.1 minicssExtendPlugin,将css抽出， 替换style-loader, 写入loader, 然后在optimision： { minior: new CssMiniPlugin() }
4.2 source-map 用来定位错误， 映射到源代码， 默认配置是eval. 开发环境是映射 。可以》eval-cheap-sopource-map
5. code-splitting
都依赖axios的模块
entry: {
‘list‘: {
file: ‘./src/list.js‘.
dependOn: ‘axios‘
},
‘index‘: {
file: ‘./src/index.js‘.
dependOn: ‘axios‘
},
axois: ‘axios‘
}
output: {
name: [name].js
}
最终会生成三个文件， 作为代码分割
6. 懒加载和预加载
借wenpack ，可以懒加载
document.onlick = async ()=>{
const a = await import ‘a.js’
}
预加载的原理是，<link preload as=‘script‘ />
预加载是利用空闲时间加载
用法是
document.onlick = async ()=>{
/**webpackChunkName a webpackPreFetch=true*/
const a = await import ‘a.js’
}
tree-shaking
满足mode=production
和esm模块， 也就是有export这样的 export const a = 1;