Error with Webpack 4 and Vue Loader 15 about vue-markdown-loader

[QingWei-Li]

vue-loader 15 的逻辑重构了，不过用下面的用法兼容

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './index.js',
    output: {
        filename: 'out.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
			// 👇
            {
                test: /\.md$/,
                loaders: ['vue-loader', 'vue-markdown-loader/lib/markdown-compiler.js']
            }
			// 👆
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

调整下，应该是下面这样

{
test: /\.md$/,
    use: [
        {
            loader: 'vue-loader'
        },
        {
            loader: 'vue-markdown-loader/lib/markdown-compiler',
            options: {
                raw: true
            }
        }
    ]
}

[Lemenxzy]

可是这样的话。vue-markdown-loader 的 options 怎么设置

[samchen08]

看来要大神来解决下了

[imcamo]

看来这个包已经放弃维护了

[zdliuccit]

放弃维护了么

[myronliu347]

希望能给出解决方案， 想用vue-cli 3.0的版本创建项目

[imcamo]

使用 vue-md-loader 吧

[EPSON-LEE]

可是这样的话。vue-markdown-loader 的 options 怎么设置

{
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader'
          },
          {
            loader: 'vue-markdown-loader/lib/markdown-compiler',
            options: {
              raw: true,
              preventExtract: true,
              use: [
                [
                  require('markdown-it-container'),
                  'demo',
                  {
                    validate: function(params) {
                      return params.trim().match(/^demo\s+(.*)$/)
                    },

                    render: function(tokens, idx) {
                      if (tokens[idx].nesting === 1) {
                        // 1.获取第一行的内容使用markdown渲染html作为组件的描述
                        let demoInfo = tokens[idx].info
                          .trim()
                          .match(/^demo\s+(.*)$/)
                        let description =
                          demoInfo && demoInfo.length > 1 ? demoInfo[1] : ''
                        let descriptionHTML = description
                          ? markdownRender.render(description)
                          : ''
                        // 2.获取代码块内的html和js代码
                        let content = tokens[idx + 1].content
                        // 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
                        return `<demo-block>
                        <div class="source" slot="source">${content}</div>
                        ${descriptionHTML}
                        <div class="highlight" slot="highlight">`
                      } else {
                        return '</div></demo-block>\n'
                      }
                    }
                  }
                ]
              ]
            }
          }
        ]
      }