相关疑难解决方法(0)

我正在处理 webpack 4.44.2，当我转换为 webpack5.0.0 时遇到这个错误

错误在 ./src/assets/sass/styles.scss 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：错误：此浏览器不支持自动 publicPath 在 E: \maktab\Control-panel\newcontrol\final-control\node_modules\css-loader\dist\cjs.js！

错误来自 fonts.scss 中的字体文件浴

@font-face {
    font-family: "Janna LT";
    src: local("Janna LT"), url(../fonts/janna.woff) format("woff");
    font-weight: normal;
}

@font-face {
    font-family: "Janna LT";
    src: local("Janna LT"), url(../fonts/janna-bold.woff) format("woff");
    font-weight: bold;
}

我的 src 结构 https://i.stack.imgur.com/vKyfW.png

dist 结构 https://i.stack.imgur.com/mLgmF.png

webpack.config.js

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:  {
      'main': './src/index.js',
    }, …

在同构反应应用程序中我myModule应该在节点和浏览器环境中表现不同.我想配置此分割点的package.json用于myModule:

package.json

{
  "private": true,
  "name": "myModule",
  "main": "./myModule.server.js",
  "browser": "./myModule.client.js"
}

file structure

??? myModule
?   ??? myModule.client.js
?   ??? myModule.server.js
?   ??? package.json
? 
??? browser.js
??? server.js

因此,当我myModule在节点中使用时,我应该只得到myModule.server.js:

server.js

import myModule from './myModule';
myModule(); // invoke myModule.server.js

在浏览器端应该只使用 myModule.client.js以下内容构建bundle:

browser.js

import myModule from './myModule';
myModule(); // invoke myModule.client.js

react-starter-kit使用这种方法,但我无法弄清楚这个配置的定义.

动机

1. package.json 做这种分裂是很好的语义点.
2. 客户端包仅包含myModule.client.js.

已知的解决方案 - 不是我的答案 …