webpack
21篇文章 · 0订阅
  • 【webpack】你所不知道的sourceMap
    通常，js代码出错，控制台会提示第几行第几列代码出错。但是webpack打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。 sourceMap就可以解决这个问题。sourceMap就是一个信息文件，里面储存着打包前的位置信…
    Webpack
  • Webpack高级概念
    一. tree shaking 二. 开发和生产模式下的打包模式区分 三. code splitting 四. Caching 五. webpack打包分析 六. Prefetching和Preloading 七. Css 代码分割 八. Shimming 九. 环境变量的使用
    Webpack
  • 如何利用webpack来提升前端开发效率（二）？
    通过如何利用webpack来提升前端开发效率（一）的学习，我们已经能够通过webpack的loader和piugin机制来处理各种文件资源。细心的小伙伴们发现了缺少了对字体文件和HTML中<img>标签的资源处理，那让我们先来解决这个问题。 随后在命令行执行npm run bu…
    Webpack
    如何利用webpack来提升前端开发效率（二）？
  • 干货！撸一个webpack插件(内含tapable详解+webpack流程)
    Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…
    Webpack
  • Webpack源码分析 - 入口Entry
    Webpack的执行流程思想非常简单，从入口文件开始，递归地查找文件的依赖，最终将所有依赖输出到一个文件中。在这过程中又穿插了文件解析、输出优化等复杂的操作，我们就从最简单的入口开始，逐渐剥茧抽丝，拨开webpack的神秘面纱。 配置是衡量一个系统灵活性的主要标识，我们在使用某…
    Webpack
  • 移动端布局适配hotcss+postcss-pxtorem
    本来团队是搞PC端开发的，前段时间架构调整，移动端人力不足，所以团队把移动端的工作也一起接过来了。 不过由于我们团队以前没开发过移动端的东西，技术积累较少，因此花费了不少时间在基础技术积累上面。 这次介绍一下我们的移动端适配方案的改进过程。 最开始进行移动端开发时，由于工期比较…
    CSS
    移动端布局适配hotcss+postcss-pxtorem
  • Webpack DllPlugin 让构建速度柔顺丝滑
    DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 D…
    Webpack
  • 使用 Webpack 的 DllPlugin 提升项目构建速度
    本文介绍了 Webpack 中 DllPlugin 插件的使用，以及配合使用 AddAssetHtmlPlugin 将构建好的 JS 文件插入到 html 页面中。 DLLPlugin 就是将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件（…
    Webpack
  • webpack 中那些最易混淆的 5 个知识点
    今天我主要分享的是一些 webpack 中的易混淆知识点，也是面试的常见内容。我把这些分散在文档和教程里的内容总结起来，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习
    Webpack 面试
    webpack 中那些最易混淆的 5 个知识点
  • 如何利用webpack来提升前端开发效率（一）？
    create-react-app project vue create project等命令。 ... 可能大家在遇到上述开发场景时，可能就二话不说，直接开启编辑器，撸起袖子就是“代码一把梭”。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mod…
    Webpack
    如何利用webpack来提升前端开发效率（一）？