起步

    如果 Vue CLI 提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南。

    手动配置

    这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

    1. // webpack.config.js
    2. const path = require('path')
    3. const VueLoaderPlugin = require('vue-loader/lib/plugin')
    5. module.exports = {
    6.   mode: 'development',
    7.   module: {
    9.       {
    10.         loader: 'vue-loader'
    11.       },
    12.       // 它会应用到普通的 `.js` 文件
    13.       // 以及 `.vue` 文件中的 `<script>` 块
    14.       {
    15.         test: /\.js$/,
    16.         loader: 'babel-loader'
    17.       },
    18.       // 它会应用到普通的 `.css` 文件
    19.       // 以及 `.vue` 文件中的 `<style>` 块
    21.         use: [
    22.           'vue-style-loader',
    23.           'css-loader'
    24.         ]
    25.       }
    26.     ]
    27.   },
    28.   plugins: [
    29.     // 请确保引入这个插件来施展魔法
    30.     new VueLoaderPlugin()
    31.   ]

    你也可以在查阅所有可用的 loader 选项。