连载

  • 什么是webpack

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

    我们都在哪里用了webpack

    招投标工程,供应商管理,在线竞价,所有基于vue开发的工程:官网,供应商库,项目看板,私有门户等等

    今天的教程大家可以参考webpack官方文档https://doc.webpack-china.org/guides/installation/

    下面我们开始吧,所有的代码都会放到https://github.com/yony

  • 上期我们了解了如何使用html-webpack-plugin自动生成一个html页面并引入依赖的入口文件

    关于css文件的引入

    先修改一下目录

    |- cofig
       |-webpack.base.config.js    
    |- dist
       |- index.html               +
       |- bundle.js              
    |- package.json
    |- /src
       |- index.css  +
       |- index.js
       |- print.js
    

    在index.js 引入index.css

    index.css

    body{
      
  • 前两期的内容相对于比较基础,本期则直接把前两周重新写的统一附件组件做为例子拿出来,讲一下在新建一个第三方库的时候我们应该怎么是要用webpack来打包我们的通用组件。

    相关代码

    所有的代码都放在 ucloud-ko-fileupload里了

    附件组件开发的目的

    目前我们在多个项目中均使用到了附件组件有requirejs和es6 import两种引入方式,由于源代码又分散在各自维护在各个不同项目之中,会增加以后的维护难度,所以刚好借此机会把附件组件独立出来,同时要支持requirejs 和es6 import的两种方式引入。

    附:关于umd

    之前大家应该都听过AMD,CMD和Commonjs,那