Webpack-konfigurationsgenerator

Standardutdata

Med standardvärdena (mode production, TypeScript, Babel, en CSS-loader och HtmlWebpackPlugin) skapar generatorn:

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

Vad varje alternativ skriver

Fasta val i utdatan

För att hålla startkonfigurationen ren är några värden inställda åt dig i stället för att visas som fält:

• Hashade filnamn. output.filename är alltid bundle.[contenthash].js, vilket tömmer webbläsarens cache varje gång bundlen ändras.
• Ren output. output.clean: true tömmer output-mappen vid varje bygge, webpack 5:s ersättning för clean-webpack-plugin.
• CSS bundlas, extraheras inte. style-loader injicerar stilarna via JavaScript. Lägg till MiniCssExtractPlugin själv för att skapa en separat .css-fil i produktion.
• Grunderna i dev-servern. När den är på sätter devServer static, port: 3000 och hot: true. Lägg till alternativ som historyApiFallback eller proxy för hand om din app behöver dem.

Så bygger du ut den

Den genererade filen är en utgångspunkt, inte en komplett produktionsuppsättning. Vanliga nästa steg som du lägger till för hand: MiniCssExtractPlugin för extraherad CSS, sass-loader för .scss, webpack 5:s asset-moduler för bilder och typsnitt, ett devtool-värde för source maps och ett splitChunks-block för koddelning.