前面我们提到了 业务逻辑 与 视图逻辑 的分离，是为了解决JS逻辑过分膨胀的问题。通过前面的例子我们发现一个不够优雅的地方，那就是模板中使用的组件必须在组件逻辑中注入。其实模板要使用什么组件跟组件的逻辑没有一点关系，秉着业务逻辑与视图逻辑分离的原则，我们应该将组件的注入移入模板。

利用webpack可以很方便地做到。首先你需要安装以下编译工具

如果你要使用修饰器decorator已经类的静态属性static等新语法，还需要使用以下包

npm install babel-preset-stage-0 babel-plugin-transform-decorators-legacy --save-dev

{
  "presets": ["env", "stage-0"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

vdt-loader

vdt-loader用于将Vdt模板编译成模板函数，webpack配置如下：

将模板经过babel-loader处理，我们可以在vdt模板中使用es6语法

模板文件

有了vdt-loader，我们可以将vdt定义成单独的文件，并在模板中引入所需的组件。例如：user.vdt定义如下：

// @file user.vdt
// 可以直接使用import引入模板所需依赖
import Button from './components/buttton';
import Menu from './components/menu';
<div>
    <Button>按钮</Button>
    <Menu />
</div>

// @file user.js
export defaults extends Intact {
    @Intact.template()
    static template = template;
    // 或者，不使用static属性
    // get template() { return template; }
}

除了在模板中引入组件外，你还可以引入另一个模板，例如，在继承layout.vdt时：

CSS文件

css文件，可以通过css-loader & style-loader引入，如果你需要可编译css工具，例如：stylus，还可以使用stylus-loader。首先安装它们。

npm install css-loader style-loader stylus-loader --save-dev

然后加入以下配置：

module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.(styl|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                        loader: 'css-loader'
                    },
                    {
                        loader: 'stylus-loader',
                        options: {
                            'include css': true
                        }
                    },
                ]
            }
        ]
    }
    ...
};

你甚至可以在模板文件中引入样式文件，这对于纯模板组件很有用，例如：layout.vdt需要定义全局样式，假设样式文件为layout.styl：

// @file layout.vdt
import './layout.styl';
<div>