• vuejs/vue-loader vue 的 webpack loader
  • 支持如下写 vue component

    // app.vue
    <style>
      .red {
        color: #f00;
      }
    </style>
     
    <template>
      <h1 class="red">{{msg}}</h1>
    </template>
     
    <script>
      module.exports = {
        data: function () {
          return {
            msg: 'Hello world!'
          }
        }
      }
    </script>

  • 在 webpack.config.js 按此配置 loader 后 { test: /\.vue$/, loader: “vue-loader” }
  • 就能如下使用了

    // main.js
    var Vue = require('vue')
    var appOptions = require('./app.vue')
    var app = new Vue(appOptions).$mount('#app')

使用 CommonJs 的写法，管理所有前端资源，其中非 js 的部分能通过各种 loader 解析。

• tutorials/getting-started

module.exports = {
    entry: "./entry.js",  // 源码入口
    output: {
        path: __dirname,       // 输出目录
        filename: "bundle.js"  // 输出文件
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
            // 符合 test 的 require，需要用 loader 解析
        ]
    }
};