解析
ES6解析
- 通过 babel-loader 解析es6语法，而其依赖于babel。
- 在 webpack.config.js中的module.rules中配置babel-loader
- 在 .babelrc中的presets中配置@babel/preset-env
- 安装 @babel/core @babel/preset-env babel-loader
- babel 需要通过配置文件来进行一系列的presets配置
scss解析
- 通过scss-loader将scss文件转换为css文件
- 通过css-loader将css文件转换为commonjs对象
- 通过style-loader将commonjs对象通过style标签插入到head中来使其生效
- 在配置rules时，要注意webpack是从右往左执行的，因此最先执行的放在最后
图片字体解析
- 通过file-loader解析
- 配置rules规则，通过test匹配正则，通过use使用loader
- 通过url-loader，与file-loader不同点是可以进行小文件的base64转换
文件监听
-
配置webpack.config.js中的watch为true，则开启监听
- 配合npm脚本命令，执行webpack --watch来进行监听
- 这种方式会自动监听变化并重新执行webpack进行打包
- 但必须手动刷新浏览器才可以看到更新后的效果
-
配置webpack.config.js中的plugins
- 添加HotModuleReplacementPlugin插件来进行热更新
- 配合使用webpack-dev-serve --open来进行文件的打包
- 这种方式会将打包后的文件放在内存中，并打开浏览器自动刷新
-
热更新原理
- compiler编译源文件生成bundle文件，并传输给bundle server
- bundle server使其可以在浏览器端以服务器地址的方式被访问
- 文件更新后webpack-dev-server自动重新打包，并将结果推送给hmr server
- hmr server将更新的部分传输给浏览器端的hmr runtime
- hmr runtime接受并执行局部更新
