Webpack-configuratiegenerator

Standaarduitvoer

Met de standaardwaarden (mode production, TypeScript, Babel, een CSS-loader en HtmlWebpackPlugin) levert de generator:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
    clean: true,
  },
  resolve: { extensions: ['.ts','.tsx','.js'] },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

Wat elke optie schrijft

Vaste keuzes in de uitvoer

Om de startconfiguratie schoon te houden, worden enkele waarden voor je ingesteld in plaats van als veld getoond:

• Gehashte bestandsnamen. output.filename is altijd bundle.[contenthash].js, wat de browsercache ongeldig maakt telkens als het bundle verandert.
• Schone uitvoer. output.clean: true leegt de uitvoermap bij elke build, de webpack 5-vervanger van clean-webpack-plugin.
• CSS wordt gebundeld, niet geëxtraheerd. style-loader injecteert de stijlen via JavaScript. Voeg zelf MiniCssExtractPlugin toe om in productie een apart .css-bestand te maken.
• Basis dev-server. Als hij aanstaat, stelt devServer static, port: 3000 en hot: true in. Voeg opties als historyApiFallback of proxy handmatig toe als je app die nodig heeft.

Verder uitbreiden

Het gegenereerde bestand is een startpunt, geen complete productie-opzet. Gebruikelijke vervolgstappen die je zelf toevoegt: MiniCssExtractPlugin voor geëxtraheerde CSS, sass-loader voor .scss, de asset-modules van webpack 5 voor afbeeldingen en fonts, een devtool-waarde voor source maps en een splitChunks-blok voor code splitting.