TLDR: npm start не выполняет рендеринг компонента
Так что я немного запутался в структуре папок, когда речь заходит о разработке распространяемого компонента реакции.
Я хочу иметь возможность демонстрации моего модуля в самом каталоге модулей, а также возможность распространения компонента в другом приложении.
Это мой текущий каталог
В настоящее время npm start дает мне это
это мой конфиг вебпак
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './'),
filename: 'index.js',
libraryTarget: 'commonjs2' // u sorta need this
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins:['@babel/plugin-proposal-class-properties']
}
}
}
]
},
// public directory will render the component.
devServer: {
contentBase: __dirname + './dist',
compress: true,
port: 9000,
watchContentBase: true,
progress: true
},
};
расстояние / index.js
import React from "react";
import ReactDOM from "react-dom";
import Fetch from '../src';
const App = () => (
<div>
<Fetch/>
</div>
)
ReactDOM.render(<App />, document.getElementById("root"));
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
и src / index.js
import Fetch from './Fetch';
export default Fetch;