使用 Webpack 解析 React 中的相对路径不起作用 [英] Resolving relative paths in React with Webpack not working
问题描述
我有一个 React 项目,我正在使用 webpack.我在 frontend/app/components/editor/index.js 中有一个组件,我想将其包含在另一个组件中.目前为了引用这个组件,我必须使用相对路径(../../../../app/components/editor).但是,这非常不容易使用,例如只想使用组件/编辑器".我的 Webpack 配置文件在 fronted/webpack.config.js 中.
I have a react project and I am using webpack. I have a component in frontend/app/components/editor/index.js that I want to include in another component. Currently in order to reference this component I am having to use a relative path (../../../../app/components/editor). However, this is very not easy to use and would like to simply use 'components/editor' for example. My Webpack config file in in fronted/webpack.config.js.
我在这篇文章中添加了一个解析设置(Resolving require paths with webpack) 但它仍然无法正常工作.
I have added a resolve setting as in this post (Resolving require paths with webpack) but it's still not working.
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,
},
})),
])
});
};
这些是我在解析块中尝试过的所有设置,但没有任何效果.
These are all the settings I have tried in the resolve block but nothing works.
resolve: {
alias: {
shared: path.resolve(__dirname, 'app')
},
resolve: {
root: path.resolve('./app')
},
resolve: {
modules: ['app']
},
resolve: {
modulesDirectories: ['app']
},
推荐答案
其实应该是
model.exports = env => {
...,
resolve: {
modules: ['app', 'node_modules']
},
...
}
所以 modules
是 resolve
对象的一个属性,它本身是全局配置对象的一个属性.此外,我还包含了 node_modules
,因为在覆盖默认值(即 [ 'node_modules' ]
)之后,您可能还想引用它们.查看文档了解更多信息.
So modules
is a property of resolve
object which itself is a property of the global configuration object. Also, I have included node_modules
, because it's likely you want to refer to those as well after you overwrite the default, which is just [ 'node_modules' ]
. See docs for more information.
根据评论更新
您收到来自 webpack-validator
的错误,由于内置的 webpack 验证器,该错误将不会得到维护.在此SO answer和webpack-validator
npm.所以错误 [1] "modules" is not allowed
是不正确的.要修复它,您需要删除/卸载 webpack-validator
.
You are getting an error from webpack-validator
, which is not gonna be maintained because of the inbuilt webpack validator. See more in this SO answer and webpack-validator
npm. So the error [1] "modules" is not allowed
is incorrect. To fix it you need to remove/uninstall webpack-validator
.
这篇关于使用 Webpack 解析 React 中的相对路径不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!