【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