Як я вирішив та налагодив свою проблему з Webpack за допомогою спроб, помилок та невеликої сторонньої допомоги.

Я б сказав, що це була справжня подорож. Я знав, що Webpack було непросто налаштувати: є багато деталей з багатьма опціями, існує npm, і вони змінюються з новими випусками. Не дивно, що налагодження може легко стати клопітким завданням, коли щось відбувається не так, як ви очікували (тобто не так, як це вказано в документах).

Спроба налагодження

Моя подорож налагодження розпочалася з наступного налаштування:

webpack.config.js

// webpack v4.6.0
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const WebpackMd5Hash = require('webpack-md5-hash');const CleanWebpackPlugin = require('clean-webpack-plugin');const webpack = require('webpack');
module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, devServer: { contentBase: './dist', hot: true, open: true }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' }, { loader: 'eslint-loader', options: { formatter: require('eslint/lib/formatters/stylish') } } ] } ] }, plugins: [ new CleanWebpackPlugin('dist', {}), new HtmlWebpackPlugin({ inject: false, hash: true, template: './src/index.html', filename: 'index.html' }), new WebpackMd5Hash() ]
};

package.json

{ "name": "post", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "clean-webpack-plugin": "^0.1.19", "eslint": "^4.19.1", "eslint-config-prettier": "^2.9.0", "eslint-loader": "^2.0.0", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.7.0", "html-webpack-plugin": "^3.2.0", "prettier": "^1.12.1", "react": "^16.3.2", "react-dom": "^16.3.2", "webpack": "^4.6.0", "webpack-cli": "^2.0.13", "webpack-dev-server": "^3.1.3", "webpack-md5-hash": "0.0.6" }}

.babelrc

{ "presets": ["env", "react"]}

.eslintrc.js

module.exports = { env: { browser: true, commonjs: true, es6: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'prettier', 'plugin:prettier/recommended' ], parserOptions: { ecmaFeatures: { experimentalObjectRestSpread: true, jsx: true }, sourceType: 'module' }, plugins: ['react', 'prettier'], rules: { indent: ['error', 2], 'linebreak-style': ['error', 'unix'], quotes: ['warn', 'single'], semi: ['error', 'always'], 'no-unused-vars': [ 'warn', { vars: 'all', args: 'none', ignoreRestSiblings: false } ], 'prettier/prettier': 'error' }};

prettier.config.js

// .prettierrc.js
module.exports = { printWidth: 80, tabWidth: 2, semi: true, singleQuote: true, bracketSpacing: true};

А в папці src / :

index.html

Original text