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
  • 这里使用 AcyOrt 的 JSON 输出插件输出博客内容,基于 vue + webpack 组合开发的一个博客。

    DEMO: http://aksdj4.am0200.com/

    项目地址: https://github.com/acyortjs/aksdj4

    JSON

    使用 acyort-json 将项目 Recordum issue 生成 JSON: https://github.com/acyortjs/aksdj4/tree/gh-pages/json

    开发说明

    基于 webpack 2 + vue 2,值得注意的是 vue-loader 已经包含了 vue-hot-reload