使用Webpack在React中解析相对路径不起作用

dpst

我有一个React项目,正在使用webpack。我在frontend / app / components / editor / index.js中有一个要包含在另一个组件中的组件。当前,为了引用此组件,我必须使用相对路径(../../../../app/components/editor)。但是,这不是很容易使用,例如想简单地使用“组件/编辑器”。我的Webpack配置文件位于fronted / webpack.config.js中。

我在这篇文章中添加了一个“解决”设置(使用webpack解决需要的路径),但仍然无法正常工作。

const {resolve} = require('path');
const path = require('path');
const webpack = require('webpack');
const validate = require('webpack-validator');
const {getIfUtils, removeEmpty} = require('webpack-config-utils');

module.exports = env => {
  const {ifProd, ifNotProd} = getIfUtils(env)

  return validate({
    entry: './index.js',
    context: __dirname,
    output: {
      path: resolve(__dirname, './build'),
      filename: 'bundle.js',
      publicPath: '/build/',
      pathinfo: ifNotProd(),
    },
    devtool: ifProd('source-map', 'eval'),
    devServer: {
      port: 8080,
      historyApiFallback: true
    },
    module: {
      loaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg)/, loader: 'file-loader'},
      ],
    },
    resolve: {     
      root: path.resolve('./app'),
    },
    plugins: removeEmpty([
      ifProd(new webpack.optimize.DedupePlugin()),
      ifProd(new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
        quiet: true,
      })),
      ifProd(new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
      })),
      ifProd(new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          screw_ie8: true, // eslint-disable-line
          warnings: false,
        },
      })),
    ])
  });
};

这些是我在resolve块中尝试过的所有设置,但没有任何效果。

resolve: {     
  alias: {
    shared: path.resolve(__dirname, 'app')
},

resolve: {     
  root: path.resolve('./app')
},

resolve: {     
  modules: ['app']
},

resolve: {     
  modulesDirectories: ['app']
},
德维达斯·卡兹瑙斯卡斯(Deividas Karzinauskas)

实际上,它必须是

model.exports = env => {
  ...,
  resolve: {
      modules: ['app', 'node_modules']
  },
  ...
}

对象modules的属性也是如此resolve它本身是全局配置对象的属性。另外,我也提供了node_modules,因为在覆盖默认值just之后,您可能还希望引用它们[ 'node_modules' ]请参阅文档以获取更多信息。

根据评论更新

您从中收到一个错误webpack-validator,由于内置的​​webpack验证程序,该错误将不会得到维护。看到更多这样的答案webpack-validatornpm因此错误[1] "modules" is not allowed是不正确的。要修复它,您需要删除/卸载webpack-validator

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TypeScript相对路径导入在Webpack中不起作用

文件操作在相对路径中不起作用

相对路径在Python中不起作用

图像的相对路径在React应用程序中不起作用?

图片标签的相对路径不起作用

django静态文件的相对路径不起作用

file_exists相对路径不起作用

img src根相对路径不起作用

Angular RouterLink相对路径在具有空路径的组件中不起作用

相对路径在lobgack.xml包含文件中不起作用

WPF - 我的相对路径在我的 XAML 界面中不起作用,为什么?

为什么相对路径在Ruby中不起作用要求

相对路径在Angular2组件中不起作用

Django CSS相对路径在Amazon S3中不起作用

PHP-使用pathinfo变量会使相对路径不起作用

PHP require_once绝对路径与相对路径(不起作用)

Cakephp 2.x相对路径不起作用,但absulate路径正在起作用

为什么从 C# 运行时 python 中的相对路径不起作用,但在 C# 之外使用相同的解释器时却起作用?

cron管道到文件的相对路径不起作用

java json模式验证相对路径不起作用(找不到URI)

C ++通过相对路径在目录外部打开文件不起作用

使用相对路径

使用“ ./”的相对路径

Webpack在css和html中的相对路径错误

我可以在Webpack开发服务器中使用相对路径-React JS

如何从 snap 包中解析相对路径?

如何在python中解析相对路径?

使用pH schematron时解析相对路径

在Angular2 + Webpack中为templateUrl使用相对路径