记录一次和webpack挣扎的经历

项目基于angular2框架，引用了metronicUI框架，大量的第三方js插件引入导致webpack打包js文件一直报各种奇奇怪怪的错。前期由于开发时间有限一直将就着只是打包css，后来项目一期上线实在是受不了首屏加载的龟速，于是下定决心要解决这个问题，于是开始深挖webpack的配置。

下面记录一下有关问题：

问题一：采用url-loader区分大小图片文件，大于8k的打包成图片，小于8k转为base64储存，减少打包后的图片资源。但是这里有一个问题就是图片引入路径格式不正确的话webpack不能提取图片并转化。一开始是在ts文件中声明变量然后把图片的url作为字符串赋值之，html中直接用<img src='xxx/xx.png'/>的方式引入，发现页面刷新这样引入的小图片都不见了，最后研究很久发现webpack在图片引入时找不到可以强行把路径写成require('xxx/xx.png')，方式如下：

// ts中 

linePattern : Array < any > = [{

        value: [ 10 , 0 ],

        name: '实线' ,

        url: require ( '../../../../../src/assets/img/toolbar/changeLinkPattern.png' )

    }, {

        value: [ 2 , 2 ],

        name: '虚线1' ,

        url: require ( '../../../../../src/assets/img/toolbar/dash1changeLinkPattern.png' )

    }, {

        value: [ 4 , 4 ],

        name: '虚线2' ,

        url: require ( '../../../../../src/assets/img/toolbar/dash2changeLinkPattern.png' )

    }, {

        value: [ 6 , 6 ],

        name: '虚线3' ,

        url: require ( '../../../../../src/assets/img/toolbar/dash3changeLinkPattern.png' )

    }, {

        value: [ 8 , 8 ],

        name: '虚线4' ,

        url: require ( '../../../../../src/assets/img/toolbar/dash4changeLinkPattern.png' )

    }, {

        value: [ 10 , 10 ],

        name: '虚线5' ,

        url: require ( '../../../../../src/assets/img/toolbar/dash5changeLinkPattern.png' )

    }

    ]

// 在html中只需这样即可

< img style = "width:25px" [ src ]= "lineS.url" />



这样打包出来的这些小图片就变成了base64不会找不到啦。

问题二：项目中引入的第三方js插件需要声明全局变量的话打包不会出问题但是打完包页面找不到，比如提示框toastr，就是这个问题。后来在webpack中使用alias定义别名toastr，然后在插件中使用provideplugin把toastr直接引入而不需要再通过import或者require。

  alias: {

      'toastr' : helpers . root ( 'src' , 'assets/global/plugins/bootstrap-toastr/toastr.min.js' )

    }

    new webpack . ProvidePlugin ({

      toastr: "toastr"

    }),

问题三：发现一个以前都没注意的问题，bootstrap只能用jquery1.xx-2.xx的版本，3.00以上的jquery浏览器会报错。。