Пытаюсь банально вывести компонент HelloWorld.
https://dropmefiles.com/pXvve// @flow
/* eslint-disable react/jsx-filename-extension */
import * as React from 'react';
import ReactDOM from 'react-dom';
import { HelloWorld } from './components';
import './styles/styles';
class App extends React.PureComponent {
render() {
return (
<HelloWorld />
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.10",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^2.1.1",
"eslint": "^5.15.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-webpack": "^0.11.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-flowtype": "^3.4.2",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.5.0",
"postcss-cli": "^6.1.2",
"postcss-loader": "^3.0.0",
"react-dev-utils": "^8.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-redux": "^6.0.1",
"redux": "^4.0.1"
}
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const htmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
});
const miniCssExtractConfig = new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
});
module.exports = {
entry: './src/index.js',
output: {
path: `${__dirname}/dist`,
publicPath: '/',
filename: 'main.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: ['> 0%'],
}),
],
sourceMap: true,
},
},
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: ['> 0%'],
}),
],
sourceMap: true,
},
},
'less-loader',
],
},
],
},
resolve: {
extensions: ['.js', '.css', '.less'],
},
plugins: [
htmlWebpackPluginConfig,
miniCssExtractConfig,
autoprefixer,
],
devServer: {
contentBase: './dist',
},
};
Простой
Простой
