building vuejs plugin with webpack - vue.js

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, {
// })
];

Answer 1

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.