Hvordan jeg løste og fejlede mit Webpack-problem gennem prøve, fejl og lidt hjælp udefra.

Jeg vil sige, at dette var en hel rejse. Jeg vidste, at Webpack ikke var let at konfigurere: der er mange dele med mange muligheder, der er npm helvede, og de ændres med nye udgivelser. Ikke underligt, at det let kan blive en besværlig opgave at debugge, når noget ikke går som du forventede (det vil sige ikke som det er i dokumenterne).

Forsøger at debugge

Min fejlretningsrejse startede med følgende opsætning:

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() ]
};

pakke.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};

Og i src / mappen:

index.html