小前端端

1.npm 包管理工具是我们前端开发人员经常使用的工具，非常地方便好用，包管理工具全称Node Package Manager（Node包管理器），简称npm，当我们下载node.js的时候已经顺带下

随着项目复杂度的升高，项目代码量会变得越来越大，由此引发的几个问题非常令人头疼，例如变量名冲突，全局变量污染，代码太长难以维护等等。为了解决这些问题，模块化由此诞生。 那到底什么是模块化、模块化开发呢

接着上次的继续，上次我们说到，高级优化我们一般从以下几方面入手 提升开发体验 提升打包构建的速度 减少代码体积 优化代码的运行性能 本文将细说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