项目基于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浏览器会报错。。
