Webpack 无法解析依赖

问题描述

我有以下文件夹结构 (here is the demo app source code)：

MyComp.scss:(app\web\src\components\MyComp\MyComp.scss) 我有以下网址：

.content{
    background-image: url(/icons/myIcon.png); // should resolve to web\icons\myIcon.png
}

Webpack 为此抛出错误：

错误：无法解析“/icons/myIcon.png” 'C:\app\web\src\components\

MyContainer.jsx: (app\web\src\containers\MyContainer\MyContainer.jsx) 我正在使用以下给出错误的绝对导入：

import MyComp from 'components/MyComp'; // This should resolve to app\web\src\components\MyComp\MyComp.jsx
import { authorizingUser } from 'myRedux'; // should resolve to app\unify\myRedux\modules\auth\actions.js

此外，node_modules 导入也失败：

./node_modules/node-fetch/index.js 中的错误 10:11-26 找不到模块：错误：无法解析“C:\node_modules\node-fetch”中的“http”

这是我的 webpack 配置：

config.js: (app\web\build\config.js)

const path = require('path');

const root = path.resolve(__dirname,'..','..'); // Project root.
const webroot = path.resolve(root,'app','web');
const assetPath = path.resolve(root,'web','dist');

module.exports = { root,webroot,assetPath };

webpack.frontend.config: (app\web\build\webpack.frontend.config.js)

require('dotenv').config();
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');

const config = require('./config.js');

const PROD = process.env.NODE_ENV === 'production';

const cssLoader = (enableModules = true) => {
  return {
    loader: 'css-loader',options: {
      modules: enableModules,sourceMap: !PROD,importLoaders: 2,modules: {
        localIdentName: PROD ? '[local]__[hash:base64:5]' : '[local]',},};
};

const postCssLoader = {
  loader: 'postcss-loader',options: {
    sourceMap: !PROD,postcssOptions: {
      public: [
        'postcss-preset-env',{
          // Options
          browsers: 'last 2 versions',],};

const sassLoader = {
  loader: 'sass-loader',};

const localStyleLoaders = [cssLoader(),postCssLoader,sassLoader];

// We want to disable css module.
const globalStyleLoaders = [cssLoader(false),sassLoader];

const devPlugins = [new webpack.HotModuleReplacementPlugin()]; // <- To generate hot update chunk
const prodplugins = [];

const devEntries = [
  `webpack-dev-server/client?path=https://my-domain.com:443`,// <-- Enables web socket connection (needs url & port)
  'webpack/hot/dev-server',// <- To perform HMR in the browser
];

const clientAppEntryFilePath = path.resolve(config.webroot,'src/client.jsx');

module.exports = {
  entry: {
    frontEndMain: [
      'babel-polyfill',...(PROD ? [] : devEntries),clientAppEntryFilePath,output: {
    path: config.assetPath,filename: '[name]-[hash].js',// Hash is used to force cache invalidation.
    publicPath: PROD
      ? '/dist'
      : `https://my-domain.com:443/dist/`,module: {
    rules: [
      //JavaScript & JSX
      {
        test: /\.(jsx|js)$/,exclude: /node_modules/,use: ['babel-loader'],// For local styles.
      {
        test: /\.(scss|css)$/,use: PROD
          ? [MiniCssExtractPlugin.loader,...localStyleLoaders]
          : ['style-loader',...localStyleLoaders],include: path.resolve(config.webroot,'src'),exclude: path.resolve(config.webroot,'src','theme'),// Global styles
      // Just like the normal style loader stack,but without css modules so we don't modify
      // classnames for our style libraries like bootstrap,slick,etc
      {
        test: /\.(scss|css)$/,...globalStyleLoaders]
          : ['style-loader',...globalStyleLoaders],include: [path.resolve(config.webroot,/node_modules/],// Images: copy image files to build folder
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,loader: 'url-loader',options: {
          limit: 10240,{
        test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,options: {
          limit: 10000,mimetype: 'application/font-woff',{
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,mimetype: 'application/octet-stream',{
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,mimetype: 'mimetype=image/svg+xml',{
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,loader: 'file-loader',resolve: {
    modules: [
      'node_modules',// Since I am using absolute import for custom modules/js. So this is required.
      'app','app/unify','app/web/src',extensions: ['.js','.jsx'],plugins: [
    ...(PROD ? prodplugins : devPlugins),new CleanWebpackPlugin(),// Since I have hashed frontEnd js/css,so this generates assets info file on root and
    // which has assets info.
    new AssetsPlugin({
      path: config.root,filename: 'web-frontend-assets.json',prettyPrint: true,}),new webpack.DefinePlugin({
      // To resolve this error on production build.
      // "You are currently using minified code outside of NODE_ENV === 'production'"
      'process.env': {
        NODE_ENV: JSON.stringify(PROD ? 'production' : 'development'),PLATFORM: JSON.stringify(process.env.PLATFORM),WEB_ENV: JSON.stringify(process.env.WEB_ENV),__CLIENT__: true,__SERVER__: false,__DEVELOPMENT__: process.env.NODE_ENV !== 'production',devServer: {
    https: {
      key: fs.readFileSync(`${config.webroot}/certs/key.pem`),cert: fs.readFileSync(`${config.webroot}/certs/cert.pem`),host: 'my-domain.com',port: '443',quiet: true,inline: true,hot: true,compress: true,// <- Enables HMR in webpack-dev-server and in libs running in the browser
    historyApiFallback: true,disableHostCheck: true,clientLogLevel: 'silent',publicPath: `https://my-domain.com:443/dist/`,contentBase: `https://my-domain.com:443`,headers: { 'Access-Control-Allow-Origin': '*' },stats: { colors: true },node: false,stats: {
    preset: 'detailed',assets: true,builtAt: true,moduleAssets: false,assetsspace: 15,modulesspace: 15,colors: true,env: true,errors: true,errorDetails: true,errorStack: true,reasons: true,modules: true,};

package.json：

  "scripts": {
    "start-frontend": "webpack --config ./app/web/build/webpack.frontend.config.js"
  },

我不确定，我到底需要在 entry.frontEndMain、output.publicPath、devServer.publicPath、devServer.contentBase 中传递什么

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript reactjs reactjs reactjs reactjs webpack webpack webpack webpack-dev-server