节点版本：v6.11.0
错误信息：
无法解析模块“./coins.json”的路径。（导入/未解决）
我还附上了错误的屏幕截图：
在这里您可以看到 App.js 和 coin.json 位于同一个根目录中：
.eslintrc
{
"extends": "airbnb",
"settings": {
"import/resolver": "webpack"
},
"rules": {
"comma-dangle": ["error", "never"],
"semi": ["error", "always"],
"react/jsx-filename-extension": 0,
"react/prop-types": 0,
"react/no-find-dom-node": 0,
"jsx-a11y/label-has-for": 0
},
"globals": {
"document": true,
"window": true
},
"env": {
"jest": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
}
}
}
应用程序.js
import React from 'react';
import { connect } from 'react-redux';
import Routes from './config/Routes';
import { setSearch } from './actions';
import localCoins from './coins.json';
class App extends React.Component {
componentWillMount() {
this.props.setSearch(localCoins);
}
render() {
return (
<Routes />
);
}
}
const mapDispatchToProps = dispatch => ({
setSearch: (...args) => { dispatch(setSearch(...args)); }
});
export default connect(null, mapDispatchToProps)(App);
我的 webpack.config.babel.js
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');
/* eslint-disable no-console */
const log = console.log;
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: '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, 'node_modules'), 'node_modules'] }
};
const developmentConfig = {
devServer: {
publicPath: '',
contentBase: path.join(__dirname, 'coinhover'),
quiet: true,
inline: true,
compress: true,
stats: 'errors-only',
open: true
},
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
);