作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正试图摆脱这个:
从'../../services/somewhere'导入{something};
而是使用:
从'services/somewhere'导入{something};
我找到这篇文章,但它只有 1.x 和 2.x 的示例 https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/
我项目的主文件夹名为 app
。
我已经在我的 webpack.config.babel.js 中尝试了这两种方法,但到目前为止还没有成功。
3.x style: https://webpack.js.org/configuration/resolve/#resolve-modules
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
}
2.x style: https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/
resolve: {
modules: [
path.resolve('./app'),
path.resolve('./node_modules')
]
}
有什么想法吗?
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';
const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
const log = console.log;
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
// template: `${__dirname}/app/index.html`,
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'coinhover.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);
const PATHS = {
app,
build: coinhover
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
}
// resolve: {
// modules: [
// path.resolve('./app'),
// path.resolve('./node_modules')
// ]
// }
};
const developmentConfig = {
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
);
最佳答案
可能是你的 eslint 配置有问题?例如,在您的 .eslintrc
中,尝试将 app
添加到您的解析器设置中:
{
"...": {},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": [
"app",
"node_modules"
]
}
}
},
}
关于javascript - 如何不依赖 React/Webpack 3 应用程序中的相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48270919/
我是一名优秀的程序员,十分优秀!