[toc]
## 支持單文件組件
```
npm i vue-loader
```
因為 `.vue` 文件內可以寫**css**，以及寫模板**html**，故還 **vue-loader** 依賴 **css-loader** 和 **vue-template-compiler**
### vue-loader配置
```
module.exports = (isDev) => {
return {
//清楚單文件組件模板中的空格
preserveWhiteSpace: true
//將所有單文件組件的css打包到抽離出的那個單獨的css文件中
//默認是和組件綁定的，這是為了讓異步加加載更完美(類似于styled-components)
, extractCSS: !isDev
//Vue的單文件組件的css默認并不支持熱更新
//需要->vue-style-loader(-D)替代style-loader
//css模塊化
, cssModules: {
localIndentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]'
//默認為串燒，這里改成小駝峰命名，便于js操作
, camelCase: true
}
//一般不用 因為一般會用postcss.config.js單獨配置
// ,postcss
//熱加載
//但無法限制單文件組件的css的熱加載
, hotReload: isDev
//Vue單文件組件內一般有3個模塊，template、script、style
//，想要解析他們，都可以設置對應的loader
//，除此之外也可以自定義模塊
//，這時候想要解析也需要對應的loader
, loaders: {
// js
// ,html
// ,style
// ,'docs':docsLoader
}
//vue調用babel-loader之前
//比如Type-script
, preLoader: {}
//Vue指定loader解析完之后
, postLoader: {}
};
};
```
## 支持jsx
另外如果想在 **vue** 中使用 `jsx`，
除了 **transform-vue-jsx** ，還需要安裝這個插件依賴的兩個包
##
