使用网页包构建vuejs插件

Question

错误/src/Loader。vue模块分析失败：C:\test\vuePlugin\src\Loader。vue意外标记（1:0）您可能需要适当的加载程序来处理此文件类型。SyntaxError:语法分析器处出现意外标记（1:0）。pp$4。在解析器中提升（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2221:15）。解析程序中的pp.unexpected（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:603:10）。pp$3。parseExprAtom（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1822:12）位于解析器。pp$3。parseExprSubscripts（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1715:21）位于解析器。pp$3。解析器上的parsemaybeanary（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1692:19）。pp$3。parsexprops（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1637:21）位于解析器。pp$3。在解析器处解析可能是有条件的（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1620:21）。pp$3。ParseMaybeaSign（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1597:21）在解析器上。pp$3。解析表达式（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1573:21）。pp$1。parseStatement（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:727:47）。pp$1。解析器上的parseTopLevel（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:638:25）。在对象上解析（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:516:17）。在解析器处解析（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:3098:39）。在NormalModule上解析（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\lib\Parser.js:902:15）。（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\lib\NormalModule.js:104:16）位于NormalModule。在下一个加载程序（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\webpack core\lib\normalmoduleemixin.js:310:10）上进行模块构建（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\webpack core\lib\normalmoduleemixin.js:275:25）C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin。js:259:5在仓库。在C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\enhanced resolve\lib\cachedinputfiles.js:38:16处完成（C:\Users\shubham-sharma2\AppData\Roaming\npm\node\u modules\webpack\node\u modules\generable fs）。js:78:16在FSReqWrap。readFileAfterClose[as oncomplete]（fs.js:511:3）@multi-main

“webpack--config--显示错误详细信息。/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'）

到您的webpack配置的顶部，并且

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

我已经看到订单成为一个问题。