Trình tạo cấu hình webpack

Kết quả mặc định

Với các giá trị mặc định (chế độ production, TypeScript, Babel, một CSS loader và HtmlWebpackPlugin), công cụ tạo ra:

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

Mỗi tùy chọn viết gì

Các lựa chọn cố định trong kết quả

Để giữ cấu hình khởi đầu gọn gàng, một vài giá trị được đặt sẵn cho bạn thay vì hiện thành trường:

• Tên tệp có hash. output.filename luôn là bundle.[contenthash].js, giúp xóa cache trình duyệt mỗi khi bundle thay đổi.
• Output sạch. output.clean: true dọn sạch thư mục output ở mỗi lần build, phần thay thế cho clean-webpack-plugin trong webpack 5.
• CSS được gộp vào bundle, không tách riêng. style-loader chèn kiểu qua JavaScript. Để xuất một tệp .css riêng cho production, hãy tự thêm MiniCssExtractPlugin.
• Cơ bản của dev server. Khi bật, devServer đặt static, port: 3000 và hot: true. Thêm các tùy chọn như historyApiFallback hoặc proxy thủ công nếu ứng dụng cần.

Mở rộng thêm

Tệp được tạo ra là điểm khởi đầu, không phải một cấu hình production hoàn chỉnh. Các bước tiếp theo thường gặp mà bạn tự thêm: MiniCssExtractPlugin để tách CSS, sass-loader cho .scss, các mô-đun asset của webpack 5 cho ảnh và phông chữ, một giá trị devtool cho source map, và một khối splitChunks để chia tách mã.