webpack基础学习

1.分包---splitChunks 可以对第三方引入的插件分开打包 2.代码懒加载。我们对首次加载不需要的代码设置延迟加载，或者在需要的时候才加载。通过import()函数实现。 prefetch会

通过前面的学习，我们的打包模式一直是在development环境下进行的，接下来我们就要区分开发和生产环境的webpack配置了。 1.新建文件夹config。再创建3个文件webpack.commo

前面说到我们都通过webpack-dev-server插件来实现搭建开发环境的，我们在开发环境下，往往需要修改一些配置来方便我们开发。接下来就介绍一些对开发有用的配置。 配置接口代理 通常我们做项目就

什么是热更新呢？他允许我们在更新模块时，页面不需要完全刷新，能做到局部刷新。 webpack-dev-server配置热更新 在入口文件下，添加热更新针对的模块。 之后我们重新运行npm run se

通过前面的学习，我们每次测试我们修改的文件是否正确，我们都要手动的去运行npm run build操作，然后查看页面是否更新，而且我们还用到了vscode的插件--live-server，这样不适十分

在我们项目开发中，我们现在会用jsx、ts、es6+等不被浏览器识别的语言或者特性，这时候我们就需要一个工具转换这些特性。这就是我们要用babel的原因，他非常类似postcss插件。 1.安装插件

plugin跟loader有什么区别呢？ 我们通过前面写的loader可以看出，loader是为来处理各种各种的文件而存在的，可以简单理解为他把浏览器不能识别的文件转换成能识别的文件，比如jsx，le

在处理业务时，我们也会用到字体库，加下来我们就学习webpack自带的asset属性来处理字体。 1.我们去iconfont的官网去下载一个字体库，按照说明我们把它引入到项目中。 2.创建一个标签，添

通常我做网站时，会用到图片资源，那一般有两种引入方式，一是img标签的src属性，而是通过css的background-image属性来家在图片，那这两种模式我们怎么在webpack中打包呢？接下来就

上一小节我们打包的js文件，但是对于我们前端，js只是其中的一部分，接下来我们要打包css。 1.修改js文件，我们动态创建一个div标签，然后通过css给这个标签添加样式。在src下创建css文件夹

我们想象一下，为什么我们在项目中可以处理less，可以引入图片，可以使用js的高级特性等，而我们的游览器并不能解析他们，却依然得到了我们想要的结果，那是谁在帮我们做这一件事呢？答案显而易见----we