我用的是webpack5,在react18中配置css module后导致antd全局样式失效,这时候可以考虑css单独配置不用模块化,less也单独有一套自己的配置,启用模块化,less用于业务代码,css用于第三方代码,配置如下:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); //把css从JS中单独提取做压缩 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //把文件复制到打包后的指定位置 const CopyPlugin = require("copy-webpack-plugin"); const isDev = process.env.NODE_ENV == "dev"; // CSS是加載 第三方的CSS,比如antd,less是業務的css,這樣就可以避免CSS模塊化對antd引入后讓antd無效的問題 module.exports = { entry: { main: path.resolve(__dirname, "../src/main.tsx"), //key就是文件输出的命名 }, output: { filename: "[name].[chunkhash:8].bundle.js", //key+哈希组成的名字 chunkFilename: "[name].[chunkhash:8].js", //key+哈希组成的名字,针对的是懒加载文件,例如react.lazy导入的文件 path: path.resolve(__dirname, "../dist"), clean: true, assetModuleFilename: "../src/assets/imgs/[name][ext]", //绝对路径会报错,就是不要path.resolve(__dirname, ".."),这么写 }, resolve: { alias: { "~": path.resolve(__dirname, "../src"), "@components": path.resolve(__dirname, "../src/components"), }, extensions: [".js", ".jsx", ".json", ".tsx", ".ts"], //表示这几个的后缀名可省略,webpack打包的时候看到这种省略后缀名的文件会先从这个集合中匹配 }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: [ { loader: "thread-loader", }, { loader: "babel-loader", options: { presets: [isDev && "@babel/preset-env"].filter(Boolean), }, }, ], }, { test: /\.(tsx|ts)?$/, use: ["ts-loader"], //thread-loader不能和ts-loader一起用,会不兼容而报错 exclude: /node_modules/, }, { test: /\.css$/i, exclude: /node_modules/, use: [ // MiniCssExtractPlugin和style-loader只能存在一个,两个都有会出document is not defined的错误,style-loader是提取样式插入到styleMiniCssExtractPlugin是提取样式到新的一个文件用link的方式引入,不支持热更新,需要手动刷新 isDev ? { loader: "style-loader", } : { loader: MiniCssExtractPlugin.loader, options: { esModule: false, //默认是es6的模块方式,浏览器上没响应,要声明为false }, }, { loader: "css-loader", options: { sourceMap: false, importLoaders: 1, }, }, "postcss-loader", ], }, { test: /\.css$/, // 排除业务模块,其他模块都不采用css modules方式解析 exclude: [/src/], use: ["style-loader", "css-loader"], }, { test: /\.less$/i, exclude: /node_modules/, use: [ // MiniCssExtractPlugin和style-loader只能存在一个,两个都有会出document is not defined的错误,style-loader是提取样式插入到styleMiniCssExtractPlugin是提取样式到新的一个文件用link的方式引入,不支持热更新,需要手动刷新 isDev ? { loader: "style-loader", } : { loader: MiniCssExtractPlugin.loader, options: { esModule: false, //默认是es6的模块方式,浏览器上没响应,要声明为false }, }, { loader: "css-loader", options: { sourceMap: false, // modules: true, modules: { localIdentName: "css__module__[name]__[local][chunkhash:8]", //加个css__module__前缀,防止purgecss-webpack-plugin打包的时候给排除了 }, importLoaders: 1, }, }, { loader: "postcss-loader", }, { loader: "less-loader", options: { lessOptions: { strictMath: true, }, }, }, ], }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: "asset/resource", }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/, // 匹配媒体文件 type: "asset", // type选择asset parser: { dataUrlCondition: { maxSize: 10 * 1024, // 小于10kb转base64位 }, }, }, ], }, plugins: [ //本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。 !isDev && new MiniCssExtractPlugin({ filename: "[name].css", //key+哈希组成的名字 }), new HtmlWebpackPlugin({ title: "llc-stage", template: path.resolve(__dirname, "../public/index.html"), // favicon: 'public/favicon.ico' }), //拷贝指定文件夹原样打包到指定目录 new CopyPlugin({ patterns: [ { from: path.resolve(__dirname, "../src/assets/imgs"), to: path.resolve(__dirname, "../dist/src/assets/imgs"), }, ], }), ].filter(Boolean), // 开启webpack持久化存储缓存 cache: { type: "filesystem", // 使用文件缓存 }, };
问题解决
标签:__,resolve,..,模块化,loader,path,antd,css From: https://www.cnblogs.com/llcdbk/p/16814560.html