hbmern的博客

一、entry入口文件1、string--->'./src/index.js'打包形成一个chunk，输出一个bundle文件。2、array3、object

1、压缩CSS后，会使得CSS被压缩成一行，文件大小也会变小2、JS兼容性问题的处理：babel-loader @babel/core @babel/preset-env a、基本js兼容性处理 -->babel/preset-env 问题：只能转换基本语法，如promise高级语法不能转换 b、全部js兼容性处理-->@babel/polyfill 问题：我只要解决部分兼容性问题，但是将所有的兼容性代码全部引入，体积太大...

webpack性能优化1、开发环境性能优化优化打包构建速度（1）HMR：hot module replacement 热模块替换作用：一个模块发生变化，只会重打包这个模块（而不是打包所有模块），极大提升构建速度样式文件：可以使用HMR功能，因为style-loader内部实现了JS文件：默认不能使用HMR功能 --->需要修改js代码，添加支持HMR功能的代码,例如if(module.hot){ //一旦module.hot为true,说明开启了HMR功能，-..

1、使用devServer开发服务器实现自动化时，发现如果项目构建后路径写成 contentBase: resolve(__dirname, 'build'), 会出错，换了以下的写法后，就不会再报错了 static:resolve(__dirname, 'build')关于devServer的配置： devServer:{ static:resolve(__dirname, 'build'), compress: true, po...

二、开发环境配置总结：less/css 文件的完整处理过程： 1.通过less-loader编译为css 2.通过post-css做css代码的兼容 3.通过css-loader将css代码编译到js文件中4.通过style-loader【创建 style 标签， 将 js 中的样式资源插入进行， 添加到 head 中生效】将css代码插入在html标签中5.或通过MiniCssExtractPlugin插件和MiniCssExtractPlugin.load...

一、五个核心概念：1、Entry（入口）：指示webpack以哪个文件为入口起点打包。分析构建内部依赖图。2、Output（出口）：指示webpack打包后的资源bundles输出到哪里去，以及如何命名。3、Loader：Loader让webpack能够去处理那些非javaScript文件【图片文件、html文件、样式文件】（webpack自身只理解javascript）4、Plugins（插件）：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。