自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主要的目的就是为了解决这个问题，将所有小文件打包成一个或多个大文件，官网的图片很好的诠释了这个事情，除此之外，Web…

随着前端工程化的不断发展，构建工具也在不断完善。作为大前端时代的新宠，webpack渐渐成为新时代前端工程师不可或缺的构建工具，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也一直为重写的构建事件钩子机制煞费苦心，为插件各种不兼容心灰…

而关于如何应用该路径并没有说清楚... 这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以publicPath设置成相对路径后，相对路径是相对于build之后的index.html的，例如，如果设置publicPath: '…

webpack是个模块打包机，无论什么资源都会被打包成模块，模块之间是有引用关系的，所以会构建一个关系依赖图，那么我们需要一个入口文件，从这个入口开始一步一步查找依赖关系，加载模块。 filename 用于输出文件的文件名。 目标输出目录 path 的绝对路径。 mode是we…

本篇文章解答了60多道关于webpack的问题，答案有详细有简单，时间关系，有的问题还未做出解答，后续会补上，持续更新。如果答案有不对的地方，请轻拍。 全局安装webpack，意味着webpack包被安装到npm的全局包目录里了。 本地安装webpack，webpack包被安装…

这时候终端的信息告诉我们打包已经成功，hash、version、time、build日期、静态资源明细等，然后就是一个warning表示需要一个mode，是开发环境还是生产环境。 这时候因为传入了设置了mode所以没有了warning。 当然webapp是需要html的，同时需…

大家好哟，这是第四篇面试官篇，估计还有个七八十篇面试文章（前端苦命）。 这篇文章介绍了webpack核心概念以及如何使用。 webpack的核心概念只要记住下面四个就够用了（除非大佬是webpack配置工程师）。 比如vue，那就是src，怼到entry参数上，webpack就…

大家好，之前出了一篇面试篇webpack入门，这篇文章继续介绍接下来更深入东西。 讲道理大家都是直接import一个loader或者使用webpack内置的loader的。 其实和正常载入loader一样，只是这里指向的是本地文件的路径。 当使用多个loader的时候，从传入l…

团队使用的 webpack 功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于 webpack 的认知总是一知半解。因此，从本篇文章开始，自己从零开始配置 webpack，认真体验一下配置过程。文章内容过于简单，如果有 webpack…