Generator Konfigurasi Webpack

Keluaran default

Dengan nilai default (mode production, TypeScript, Babel, loader CSS, dan HtmlWebpackPlugin), generator menghasilkan:

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

Apa yang ditulis setiap opsi

Pilihan yang sudah ditetapkan pada keluaran

Agar konfigurasi awal tetap ringkas, beberapa nilai ditetapkan untuk Anda alih-alih ditampilkan sebagai bidang:

• Nama file ber-hash. output.filename selalu bundle.[contenthash].js, yang membatalkan cache browser setiap kali bundle berubah.
• Output bersih. output.clean: true mengosongkan folder output pada setiap build, pengganti clean-webpack-plugin di webpack 5.
• CSS di-bundle, bukan diekstrak. style-loader menyisipkan gaya melalui JavaScript. Untuk menghasilkan file .css terpisah di produksi, tambahkan sendiri MiniCssExtractPlugin.
• Dasar dev server. Saat diaktifkan, devServer mengatur static, port: 3000, dan hot: true. Tambahkan opsi seperti historyApiFallback atau proxy secara manual jika aplikasi Anda membutuhkannya.

Cara memperluasnya

File yang dihasilkan adalah titik awal, bukan setup produksi lengkap. Langkah lanjutan yang umum Anda tambahkan sendiri: MiniCssExtractPlugin untuk mengekstrak CSS, sass-loader untuk .scss, modul asset webpack 5 untuk gambar dan font, nilai devtool untuk source map, dan blok splitChunks untuk code splitting.