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

时间 2019-11-16

标签 webpack vue2.5 vue 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实现了在开发阶段高效的自动编译预览css

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组件对象。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最新语法，好比在新语法中自动加浏览器前缀webpack

3. babel

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

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

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

3. 文件资源

url-loader@0.5.9
file-loader@1.1.11

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