webpack打包报错

来源:2-3 SSR的webpack打包配置

QAQ随心

2020-12-17 16:55:54

webpack打包报错

具体报错:

[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:120:11)
    at Object.basename (path.js:671:5)
    at new module.exports (E:\web-workspace\vue-ssr\node_modules\vue-loader\lib\loader.js:32:25)
    at Object.<anonymous> (E:\web-workspace\vue-ssr\config\webpack.base.config.js:56:13)
    at Module._compile (E:\web-workspace\vue-ssr\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (E:\web-workspace\vue-ssr\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) {
  code: 'ERR_INVALID_ARG_TYPE'
}

webpack.base.config.js

const path = require("path");
// const { VueLoaderPlugin } = require("vue-loader");
const VueLoaderPlugin = require("vue-loader");
const resolve = (dir) => path.join(path.resolve(__dirname, "../"), dir);
const FirendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";

module.exports = {
  devtool: isProd ? false : "#cheap-module-source-map",
  mode: isProd ? "production" : "development",
  output: {
    path: resolve("dist"),
    publicPath: "/dist/",
    filename: "[name].[chunkhash].js",
  },
  resolve: {
    alias: {
      public: resolve("public"),
    },
  },
  module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          compilerOptions: {
            preserveWhitespace: false,
          },
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "[name].[ext]?[hash]",
        },
      },
      {
        test: /\.s(a|c)s?$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  performance: {
    hints: false,
  },
  plugins: [new VueLoaderPlugin(), new FirendlyErrorsWebpackPlugin()],
};

写回答

2回答

Brian

2020-12-17

感觉是不是开了ts?

你在用ts写?


直接在tsconfig.json中把commonjs规范的几个webpack配置文件exclude,也可以。

0

qq_狼啸_0

2020-12-17

你好,针对这种问题,最好自己调试:

  1. 检查node版本是否过高?

  2. 检查vue-loader版本是否过高?

  3. 如果上面2步都没问题,教你一个办法,“采用减法排查问题”,先注释掉一部分代码,然后再逐一加上,就可定位问题出在哪了

0

0 学习 · 1842 问题

查看课程