前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突

[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突

作者头像
fastmock
发布2022-11-21 11:30:48
1.5K1
发布2022-11-21 11:30:48
举报
文章被收录于专栏:fastmockfastmock

当我们使用webpack5.x打包项目时,在现网环境需要使用mini-css-extract-plugin将我们的样式打包到独立的样式文件中,使用官方推荐配置能正常运行

代码语言:javascript
复制
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: "[name].css",
      chunkFilename: "[id].css",
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

但是当我们同时使用了 speed-measure-webpack-plugin 插件来打印各个module的打包时间时,就会出现无法正常打包的情况,报错信息如下:

代码语言:javascript
复制
Webpack 5 fails as soon as I smp.wrap() my config, with the following error:

ERROR in ..../Error.scss
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (.../node_modules/mini-css-extract-plugin/dist/loader.js:50:14)

这时候我们需要去判断下,再不需要输出打包时间的情况下,不使用 smp 插件,如,我的方式

代码语言:javascript
复制
const wrapConfig = isDev ? smp.wrap : (config) => config;
module.exports = wrapConfig({

})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档