webpack

接着上次的继续，上次我们说到，高级优化我们一般从以下几方面入手 提升开发体验 提升打包构建的速度 减少代码体积 优化代码的运行性能 本文将细说3、4两方面 1.减少打包代码体积 1.1 Tree Sh

webpack的高级配置其实就是进行优化，让代码在编译运行的时候性能更好。一般情况下我们从以下几个方面来入手： 提升开发体验 提升打包构建的速度 减少代码体积 优化代码的运行性能 下面来详细聊一聊 1

1.提取css为单独的文件 在之前的打包方式下，css被打包在js文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样css产生作用就慢了一步，导致闪屏现象的出现，这里我们可以把

之前学习的内容都是在开发模式下如何配置webpack，这节来认真盘一盘生产模式下如何调配webpack。 1.什么是生产模式？ 生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们

首先还是要下载包 接着在webpack.config.js中加入下面的配置，html的护理使用插件来完成的 最后还要去除public/index.html中的js引用，因为因为 HtmlWebpack

Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。 在开发中，团队对代码格式是有严格

1.修改输出文件夹 很多时候我们需要将打包后的资源进行合理地分类存储，例如js文件放在js文件夹，图片放在image文件夹，此时就可以修改相应的配置以达到这个目的。 js文件输出位置 在配置文件的ou

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们

1.为什么要处理样式 Webpack 本身是不能识别样式资源的，包括字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们需要借助 Loader 来帮助 Webpack

1.五大核心概念 entry（入口） 指示 Webpack 从哪个文件开始打包 output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等 loader（加载器） webpack

什么是前端工程化？为什么要进行工程化？在工程化出现之前，前端开发可谓是草莽时代，非常缺乏规范化、流程化，js、css以及其他资源的引入满天飞，项目一旦上了规模，具备了一定的复杂度，代码的引入、资源的加