美文网首页
升级vue-loader依赖包后造成require()方法返回是

升级vue-loader依赖包后造成require()方法返回是

作者: hao102 | 来源:发表于2020-02-26 10:46 被阅读0次

    vue-loader在13.x以后通过require导入的包默认esModule是true;造成直接通过require方法引入的静态资源无法使用;需要手动添加default属性;
    解决方法就是重置vue-loader中的url-loader配置;解决步骤如下:

    1. 安装url-loader
    npm i url-loader
    
    1. 更改vue.config.js,替换规则里的loader参考替换规则里的loader;在链式操作里重新配置url-loader;配置如下;
      chainWebpack (config) {
        config.plugins.delete("preload"); // TODO: need test
        config.plugins.delete("prefetch"); // TODO: need test
        // reset url-loader
        const urlRule = config.module.rule('images')
        // 清除已有的所有 loader。
        // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
        urlRule.uses.clear()
        // 添加要替换的 loader
        urlRule
          .use("url-loader")
          .loader("url-loader")
          .options({
            limit: 8192,
            esModule: false
          })
        // set svg-sprite-loader
        config.module
          .rule("svg")
          .exclude.add(resolve("src/icons"))
          .end();
        config.module
          .rule("icons")
          .test(/\.svg$/)
          .include.add(resolve("src/icons"))
          .end()
          .use("svg-sprite-loader")
          .loader("svg-sprite-loader")
          .options({
            symbolId: "icon-[name]"
          })
          .end();
    
        // set preserveWhitespace
        config.module
          .rule("vue")
          .use("vue-loader")
          .loader("vue-loader")
          .tap(options => {
            options.compilerOptions.preserveWhitespace = true;
            return options;
          })
          .end();
    
        config
          // https://webpack.js.org/configuration/devtool/#development
          .when(process.env.NODE_ENV === "development", config =>
            config.devtool("cheap-source-map")
          );
    
        config.when(process.env.NODE_ENV !== "development", config => {
          config
            .plugin("ScriptExtHtmlWebpackPlugin")
            .after("html")
            .use("script-ext-html-webpack-plugin", [
              {
                // `runtime` must same as runtimeChunk name. default is `runtime`
                inline: /runtime\..*\.js$/
              }
            ])
            .end();
          config.optimization.splitChunks({
            chunks: "all",
            cacheGroups: {
              libs: {
                name: "chunk-libs",
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: "initial" // only package third parties that are initially dependent
              },
              elementUI: {
                name: "chunk-elementUI", // split elementUI into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
              },
              commons: {
                name: "chunk-commons",
                test: resolve("src/components"), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 5,
                reuseExistingChunk: true
              }
            }
          });
          config.optimization.runtimeChunk("single");
         
        });
      }
    

    配置完成后重新
    npm run dev
    思路参考

    相关文章

      网友评论

          本文标题:升级vue-loader依赖包后造成require()方法返回是

          本文链接:https://www.haomeiwen.com/subject/przpchtx.html