我有一种感觉，凡是涉及到webpack配置这一块的东西都是比较晦涩难懂的，也不知道是因为我底子比较薄还是暂时没有get到那个点。之前看到过一句话，入了前端自动化的坑以后，点技能树的时候会瞬间爆炸。现在真的是深有体会，es6以后的前端再也不是像以前一样跟UI商量这里差几像素那里放几个图标这么简单了。最近学习webpack看见一个非常好的webpack教程，分享给大家。
一. vue2.0使用vue-cli和webpack默认模板，将单页面入口改造成多页面入口
二. 用webpack把我们的业务模块分开打包，从而可以使我们的项目能够按需加载，按模块加载
三. webpack对各种文件路径设置的总结
- webpack在开发环境与生产环境可以设置不同的项目输出目录和静态资源输出目录，例如我们把项目输出目录在服务器根目录下的page目录中，那么这时候静态资源输出目录就应该是/page/目录。如果此时设置的publicPath为./的话，css的背景图就会以它所在的css计算目录了。
- webpack中alias的设置能够减少我们在import或者require时引用文件的麻烦，但是这种设置对css和html里的路径是不能生效的，要想引用图片的话，按照webpack一切皆模块的概念，可以使用require引用图片来减少路径的书写
- 对于页面静态的图片（经常会更换的图片），我们往往会放在根目录下的static目录下，而很少会更换的图片和一些公用的css或者js，我们可以放在src/assets下，对于那些小logo，一旦使用除非项目大改版否则不会更换的logo，甚至可以直接放在相应组件目录下
- webpackde的rules中可以添加设置url-loader，它会对css中.png,.jpg等图片后缀的文件进行处理，如果该文件大于一定值（默认为10000，约10k大小），则会将文件转成base64图片，否则输出到一个预设好的目录
网友评论