zoukankan      html  css  js  c++  java
  • vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

    场景:

    . webpack2.4.*集成vue-loader@15.7.2报错

    原因:

    参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
    
    Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

    解决方法:

    在webpack.config.js中加入如下:

    var path=require('path');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    var ExtractTextPlugin=require('extract-text-webpack-plugin');
    var config={
        // 配置入口
        entry:{
            main:'./main'
        },
        // 配置出口
        output:{
            // path用来存放打包后的文件输出目录,必填
            path:path.join(__dirname,'./dist'),
            // publicPath指定资源文件引用的目录
            publicPath:'/dist/',
            // filename用于指定输出文件的名称
            filename:'main.js'
        },
        // 配置Loader,增加对.css文件的处理
        module:{
            rules:[
                {
                    test:/.vue$/,
                    loader:'vue-loader',
                    options:{
                        loaders:{
                            css:ExtractTextPlugin.extract({
                                use:'css-loader',
                                fallback:'vue-style-loader'
                            })
                        }
                    }
                },
                {
                    test:/.js$/,
                    loader:'babel-loader',
                    exclude:/node_modules/
                },
                // 以下是使用插件后的loader配置
                {
                    test:/.css$/,
                    use:ExtractTextPlugin.extract({
                        use:'css-loader',
                        fallback:'style-loader'
                    })
                }
            ]
        },
        plugins:[
            // 重命名提取后的css文件
            new ExtractTextPlugin("main.css"),
            new VueLoaderPlugin()
        ]
    };
    module.exports=config;

    部分转载自:https://blog.csdn.net/cominglately/article/details/80555210

  • 相关阅读:
    在intelij IDEA中添加对jetBrick文件的识别
    Android ScrollView 和ListView 一起使用的问题汇总
    关于android 内存的笔记
    Android 内存
    Adb 获取手机信息
    ADB command
    org.apache.http 源代码下载
    用Fiddler查看 Android/iOS 网络请求
    java Enum 类型互转
    InstallShield 制作MSI
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/11904159.html
Copyright © 2011-2022 走看看