Создание плагина vuejs с помощью веб-пакета

Question

ОШИБКА в ./src/Loader.vue Сбой анализа модуля: C: \ test \ vuePlugin \ src \ Loader.vue Неожиданный токен (1: 0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. Ошибка синтаксиса: неожиданный токен (1: 0) на Parser.pp $ 4.raise (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 2221: 15) в Parser.pp.unexpected (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 603: 10) в Parser.pp $ 3.parseExprAtom (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1822: 12) в Parser.pp $ 3.parseExprSubscripts (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1715: 21) в Parser.pp $ 3.parseMaybeUnary (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1692: 19) в Parser.pp $ 3.parseExprOps (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1637: 21) в Parser.pp $ 3.parseMaybeConditional (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1620: 21) в Parser.pp $ 3.parseMaybeAssign (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1597: 21) в Parser.pp $ 3.parseExpression (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 1573: 21) в Parser.pp $ 1.parseStatement (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 727: 47) в Parser.pp $ 1.parseTopLevel (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 638: 25) в Parser.parse (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 516: 17) в Object.parse (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js: 3098: 39) в Parser.parse (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Parser.js: 902: 15) на NormalModule. (C: \ Users \ Shubham-sharma2 \ AppData \ Roaming \ НПМ \ node_modules \ WebPack \ Lib \ NormalModule.js: 104: 16) в NormalModule.onModuleBuild (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js: 310: 10) at nextLoader (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js: 275: 25) в C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js: 259: 5 в Storage.finished (C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ extended-resolve \ lib \ CachedInputFileSystem.js: 38: 16) в C: \ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ graceful-fs \ graceful-fs.js: 78: 16 в FSReqWrap.readFileAfterClose [as oncomplete] (fs.js: 511: 3) @ multi main

"webpack --config --display-error-details ./webpack.config.js"

const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');

var config = {
    entry:path.resolve(__dirname,'src/plugin.js'),
    output: {
      path: path.resolve( __dirname,'/dist/')
    },
    module: {
      rules: [  {
        test: /\.js$/,
        loader: 'babel-loader',
        include: __dirname,
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      } ]
    },resolve: {
      extensions: ['.vue', '.js', '.jsx','']
    },plugins:[            new webpack.optimize.UglifyJsPlugin( {
      minimize : true,
      sourceMap : false,
      mangle: true,
      compress: {
        warnings: false
      }
    } )]
  };
  config.node={
    fs:'empty'
  };
  module.exports = [

    merge(config, {
        entry: path.resolve(__dirname,'src/plugin.js'),
        output: {
          filename: 'loader.min.js',
          libraryTarget: 'window',
          library: 'Loader',
        }
      }),
      merge(config, {
        entry: path.resolve(__dirname , 'src/Loader.vue'),
        output: {
          filename: 'loader.js',
          libraryTarget: 'umd',
          library: 'Loader',
          umdNamedDefine: true
        }
      })
    // Config 1: For browser environment
    // merge(commonConfig, {
    // }),
    // Config 2: For Node-based development environments
    // merge(commonConfig, {
    // })
  ];

Answer 1

Добавить

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

в начало конфигурации вашего веб-пакета и

new VueLoaderPlugin()

в разделе плагинов.

А для блоков стиля добавьте:

      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }

Вы также можете попробовать:

  extensions: ['', '.vue', '.js', '.jsx']

Я видел, что заказ стал проблемой.