webpack

  • 何为code splitting

    code splitting是webpack里一个非常重要的功能,利用它可以实现按需加载,减少首次加载的时间。

    我们知道,如果将所有代码全部都放在一个文件中会很不恰当,尤其是打开页面的时候不需要使用到的代码块。

    而很多人进行前端打包时都会把所有代码都打成一个bundle包,这样虽然开发人员是省事了,但是用户使用时很可能会因为js文件过大而造成页面卡顿的现象,尤其是大型网站。

    webpack的code splitting则可以让我们做到按需加载。它的做法就是做出一个分离点,将本次加载不会用到的代码快放到分离点,一个分离点就是一个文件。需要分离点的时候再异步加载进

  • 在看webpack文档的LIBRARY AND EXTERNALS一节时,对output.libraryTarget和output.library还有externals总是无法理解,于是在segmentFault提问后结合实践总算多少理解它是怎么用的。

    externals

    官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

    怎么理解呢?我们先通过官网说的那个jquery的案例来理解。

    有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我

  • webpack对样式的处理

    我们可以在js中引入样式文件

    require('myStyle.css')

    这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。

    一般来说需要引入css-loader和style-loader,其中css-loader用于解析,而style-loader则将解析后的样式嵌入js代码。

    // webpack配置如下
    {
      module: {
        loaders: [
          { test: /\.$/, loader: "style-loader!css-loader" }
        ]
      }
    }

    可以发现,webpack的loade

  • 如何使用webpack里的CommonsChunkPlugin插件

    CommonsChunkPlugin用于将一个传统的js应用拆分成不同的模块,并在重用公共依赖的模块

    为什么要使用CommonsChunkPlugin?

    它非常适合用于开发一个由很多页面组成的应用(无论是传统的页面或者是页面路由)

    1.单入口文件

    在使用webpack时,通常会把所有的代码都打包到一个入口文件entry.js 之中。当项目规模比较小的时候并没有什么,但如果项目规模比较大里之后,这就意味着在不同页面会有一堆无用的代码被引用。

    //不存在代码分割
    entry.js
     - app
     - page1
     - pa
  • Falco 是基于 webpack,npm 的一层封装。解决的问题是 demo 代码的构建打包问题,而直接运行代码是附加的一个功能

    项目地址:https://github.com/fratercula/falco

    背景

    JavaScript 模块或者框架需要 demo 展示来说明使用方式,例如 antd 里面就有很多 demo 的展示。那么怎么快速生成这些 demo 呢,一些框架可以做类似事情,例如 docz

    docz 只是解决本地已经安装的问题,也就是说 demo 的展示需要本地已经安装好依赖。那这样就有问题了,如果 demo 代码是各种 js 依赖的,那就是说要不断的本地安装依赖。无