update advanced sfc docs

Author: kazupon

docs/advanced/sfc.md

@@ -78,6 +78,17 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
       },
+      // for i18n resources (json/json5/yaml)
+      {
+        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
+        type: 'javascript/auto',
+        // Use `Rule.include` to specify the files of locale messages to be pre-compiled
+        include: [
+          path.resolve(__dirname, './src/locales'),
+        ],
+        loader: '@intlify/vue-i18n-loader'
+      }
+      // for i18n custom block
       {
         resourceQuery: /blockType=i18n/,
         type: 'javascript/auto',
@@ -90,7 +101,6 @@ module.exports = {
 }
 ```
 
-
 ## Bundling with Rollup
 
 ### rollup-plugin-vue-i18n
@@ -301,13 +311,20 @@ In order to do that we have to create a `vue.config.js` at the root of our proje
 ```js
 module.exports = {
   chainWebpack: config => {
+    config.module
+      .rule('i18n-resource')
+        .test(/\.(json5?|ya?ml)$/)
+          .include.add(path.resolve(__dirname, './src/locales'))
+          .end()
+        .type('javascript/auto')
+        .use('i18n-resource')
+          .loader('@intlify/vue-i18n-loader')
     config.module
       .rule('i18n')
-      .resourceQuery(/blockType=i18n/)
-      .type('javascript/auto')
-      .use('i18n')
-        .loader('@intlify/vue-i18n-loader')
-        .end();
+        .resourceQuery(/blockType=i18n/)
+        .type('javascript/auto')
+        .use('i18n')
+          .loader('@intlify/vue-i18n-loader')
   }
 }
 ```