脚本宝典收集整理的这篇文章主要介绍了

【webpack】vue2.5 + webpack3 常用loaders汇总

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

从零开始搭建vue+webpack环境,坑很多,各种plugins和loader眼花缭乱,最关键的是很多loader随着webpack4升级也是大改造,新版本在webpack3上直接用不了。下面关键记录些东西和版本

1. webpack

  • webpack@3.12.0
  • webpack-dev-server@2.9.1

webpack负责vue工程的构建,webpack-dev-server实现了在开发阶段高效的自动编译预览

2. vue

  • vue@2.5.17
  • vue-loader@14.2.3
  • vue-template-compiler@2.5.2

vue编译好的项目必须在web服务器环境(包括webpack-dev-server)下执行,否则字体和样式会找不到

vue-loader 将 *.vue文件中的 <template><script><style> 拆分,导出一个CommonJS模块的 Vue组件对象。

3. css

  • css-loader@0.28.11
  • less@2.7.3
  • less-loader@4.0.5
  • postcss-loader@2.1.6
  • postcss-cssnext@3.1.0
  • sass-resources-loader@1.3.3

css-loader 用于解析原生css,或者解析 vue-loader 导出的css部分,并将它们写到 <head> 中
less-loader 用于将less语法解析为css语法
postcss-loader 解析postcss语法,postcss-cssnext允许在项目中使用下一代css最新语法,比如在新语法中自动加浏览器前缀

3. babel

  • babel-core@6.26.3
  • babel-loader@7.1.5
  • babel-preset-env@1.7.0

babel用于将js新语法转换成浏览器识别的es5语法,可以使得开发中直接使用es6新语法而不用担心兼容问题。

babel-core和babel-loader必须安装,babel-preset-env指定转换最新语法

3. 文件资源

  • url-loader@0.5.9
  • file-loader@1.1.11

除了上面的配置解析js语法和css之外,项目中必不可少的还有图片,字体等文件资源,在webpack构建时它们自然也需要loader去处理。这个时候就需要使用url-loader,url-loader依赖file-loader,可以根据资源大小选择生成图片还是base64编码

总结

以上是脚本宝典为你收集整理的

【webpack】vue2.5 + webpack3 常用loaders汇总

全部内容,希望文章能够帮你解决

【webpack】vue2.5 + webpack3 常用loaders汇总

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过