首页 文章

使用webpack构建vuejs插件

提问于
浏览
0

./src/Loader.vue中的错误模块解析失败:C:\ test \ vuePlugin \ src \ Loader.vue意外的令牌(1:0)您可能需要一个适当的加载器来处理此文件类型 . SyntaxError:Parser.pp $ 4.raise(C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js:2221:15)中的意外标记(1:0)在Parser.pp $ 3.parseExprAtom的Parser.pp.unexpected(C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js:603:10)中(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 \在Parser.pp $ 3.parseMaybeUnary(C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules)漫游\ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js:1715:21) \ 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:2 1)在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在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)在Parser.parse上的Object.parse(C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js:3098:39)(C:\用户\ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Parser.js:902:15)在NormalModule . (C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ 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)nextLoader(C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js:275:25)在Storage.finished的C:\ Users \ shubham-sharma2 \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js:259:5(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, {
    // })
  ];

1 回答

  • 0

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

    到你的webpack配置的顶部,和

    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']
    

    我看到订单成了问题 .

相关问题