webpack使用mini-css-extract-plugin时报错TypeError: Invalid value used in weak set

webpack使用mini-css-extract-plugin时报错TypeError: Invalid value used in weak set

错误原因:

vue-cli使用的是4.+,下载最新的mini-css-extract-plugin为2.9.0,与vue-cli不兼容;需要将mini-css-extract-plugin降为1.6.0版本

#错误提示
在这里插入图片描述
#代码

const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
module.exports = {
  // publicPath:'/',   //history模式
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@c", resolve("src/components"))
      .set("@u", resolve("src/utils"))
      .set("@v", resolve("src/views"))
      .set("@a", resolve("src/assets"));
    config.optimization.runtimeChunk("single");
  },

  configureWebpack: {
    devtool: "source-map",
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    plugins: [
      new MiniCssExtractPlugin({
        // 修改打包后css文件名   // css打包文件,添加时间戳
        filename: `css/[name].${version}.css`,
        chunkFilename: `css/[name].${version}.css`,
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        }
      ],
    },
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `[name].${process.env.VUE_APP_Version}.${version}.js`,
      chunkFilename: `[name].${process.env.VUE_APP_Version}.${version}.js`,
    },
  },

  //是否开启eslint保存检测
  lintOnSave: false,
  transpileDependencies: [
    /[/\\]node_modules[/\\]@jiaminghi[/\\]color[/\\]es[/\\]config[/\\]keywords.mjs/,
    /[/\\]node_modules[/\\]element-ui/,
    "@jiaminghi",
    "crypto-js",
    "element-ui",
    "@babel",
  ],
  //vue打包生成的文件(主要是js文件)过大的优化
  //打包不生成map文件
  productionSourceMap: false,
  //全局引入less文件
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/css/common/variables.less")],
    },
  },
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true
    // {
    //   // 修改打包后css文件名   // css打包文件,添加时间戳
    //   filename: `css/[name].${version}.css`,
    //   chunkFilename: `css/[name].${version}.css`,
    // },
  },
};
  • 10
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果使用 `mini-css-extract-plugin` 插件让 webpackCSS 打包到一个单独的 CSS 文件中,而 CSS 文件中的 URL 路径发生了错误,一般有两种情况: 1. CSS 中的相对路径错误:在 CSS 文件中使用的相对路径应该相对于 CSS 文件的位置来解析,而不是相对于 HTML 文件或 JS 文件的位置。如果你使用 `MiniCssExtractPlugin.loader` 作为 CSS loader,那么 CSS 文件会被提取到 `output.path` 目录下的某个位置,而不是和 JS 文件同级的位置。因此,你需要在配置中指定 `publicPath` 参数来指定 CSS 文件在服务器上的 URL 路径。例如: ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { // ... output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/", }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", }), ], }; ``` 上面的配置中,我们将 CSS 文件提取到 `dist/css` 目录下,并指定了 `publicPath` 参数为 `/`,表示所有静态资源都在根目录下。这样,在 CSS 文件中使用相对路径,就会相对于 `dist/css` 目录来解析。 2. 图片等资源文件路径错误:如果 CSS 中包含了图片等资源文件,那么这些文件的路径也需要正确解析。一般来说,可以使用 `file-loader` 或 `url-loader` 来处理这些文件,并在 CSS使用相对路径来引用它们。例如: ```css /* style.css */ body { background-image: url(../images/bg.jpg); } ``` ```js // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: "url-loader", options: { limit: 8192, name: "images/[name].[hash:8].[ext]", }, }, ], }, ], }, }; ``` 上面的配置中,`url-loader` 会将小于 8KB 的图片文件转换为 base64 编码的 Data URL,而大于 8KB 的文件会被转换为单独的文件,并存放到 `dist/images` 目录下。在 CSS 文件中使用相对路径 `../images/bg.jpg` 就可以正确引用这个图片文件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值