Question

我正在使用 NodeJS 和 webpack 开发 webapp 。它还使用 ReactJS 作为依赖项。所以，让我们简单地称之为webi。

在我的package.json中，我将一个包作为依赖项引用，我想在应用程序中使用它。这个软件包不是来自npm，而是由我自己开发并驻留在同一个文件系统本地，完全正常。我正在开发这个包，让我们并行调用 ui-elements 和 webapp ，因为我知道我必须使用 ui-elements 关于 webapp 式项目的10个。

回到问题：我npm install时导入包，所以我在node_modules目录中有我的本地包。好。

此 ui-elements -package也与webpack捆绑在一起，并包含一些使用图像作为背景图像的React组件。现在，当我在包文件夹中运行./node_modules/.bin/webpack时（在开发 ui-elements 包时），文件加载器将资源发送到res/文件夹，就像我想要的那样在 ui-elements 包中的webpack.config.js中。

但是因为我想在 webapp 中使用 ui-elements 包，所以资源位于node_modules/目录的深处（node_modules/ui-elements/res ）。

我的问题：

如何更改 webapp 项目中的webpack.config.js，以使浏览器解析图像？

而且，我觉得太复杂了吗？我只想构建和使用一个包（包含一些带有背景图像的ui元素），我可以在React webapp 中重用它。有更好的方法吗？

我将粘贴两个项目的webpack配置的摘录：

UI元素

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs2',
    path: __dirname
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'res/img/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules')
    ],
  }
};

web应用

webpack.config.js

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'webapp.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    /*
     * this entry makes me use a local working tree of the
     * ui-elements package, which makes working easier, i don't
     * have to switch projects, rebuild the package and update my
     * dependencies in this webapp project
     */
    /*
    alias: {
      "ui-elements": path.resolve(__dirname, 'libDev'),
    },
    */
    extensions: ['.js', '.jsx'],
    modules: [
      path.resolve(__dirname, 'src'),
      // path.resolve(__dirname, 'libDev'),
      path.resolve(__dirname, 'node_modules')
    ],
  }
};

如何处理自己的节点包中的图像等资源

0 个答案: