building vuejs plugin with webpack

Question

ERROR in ./src/Loader.vue Module parse failed: C:\test\vuePlugin\src\Loader.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (1:0) at Parser.pp$4.raise (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseStatement (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47) at Parser.pp$1.parseTopLevel (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) at Parser.parse (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) at Object.parse (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) at Parser.parse (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\lib\Parser.js:902:15) at NormalModule. (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:104:16) at 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) at C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 at Storage.finished (C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) at C:\Users\shubham-sharma2\AppData\Roaming\npm\node_modules\webpack\node_modules\graceful-fs\graceful-fs.js:78:16 at 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, {
    // })
  ];

Just the stack trace is not useful for people helping you. Post your webpack config, commands you are trying to run, piece of code, etc. — PlayMa256
@StevenSpungin first line is just opening of <template></template> — Shubham Sharma

Steven Spungin Steven Spungin · Accepted Answer · 2018-09-10T13:48:18

Add

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

to the top of your webpack config, and

new VueLoaderPlugin()

in your plugin section.

And for your style blocks, add:

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

You might also try:

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

I have seen the order become an issue.

building vuejs plugin with webpack

1 Answers