vue html-loader,Vue + Webpack + Vue-loader学习教程之相关配置篇

前言

之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍，大家可以点击这篇文章了解详情。下面就来看看相关配置篇，感兴趣的可以参考学习。

使用预处理器

在 Webpack 中，所有的预处理器需要和一个相应的加载器一同使用。vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码。它会根据 lang 属性自动用适当的加载器去处理。

CSS

例如，我们编译用 SASS 编译

npm install sass-loader node-sass --save-dev

/* 这里写一些 sass 代码 */

在引擎内，首先，

JavaScript

默认情况下，Vue 组件内的所有 JavaScript 会被 babel-loader 处理。当然，你也可以更改：

npm install coffee-loader --save-dev

# 这里写一些 coffeescript!

Templates

处理模板的过程有点不同，因为大多 Webpack 模板加载器(比如 jade-loader )会返回一个模板处理函数，而不是被编译过的 HTML 字符串。我们只要安装 jade ，而不是 jade-loader ：

npm install jade --save-dev

div

h1 Hello world!

重要提示:如果你使用 vue-loader@<8.2.0, 你也需要安装 template-htm