ตัวสร้างการตั้งค่า Webpack

ผลลัพธ์เริ่มต้น

ด้วยค่าเริ่มต้น (โหมด production, TypeScript, Babel, CSS loader และ HtmlWebpackPlugin) เครื่องมือจะสร้าง:

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

แต่ละตัวเลือกเขียนอะไร

ตัวเลือกที่กำหนดตายตัวในผลลัพธ์

เพื่อให้การตั้งค่าเริ่มต้นกระชับ ค่าบางอย่างถูกตั้งไว้ให้แทนที่จะแสดงเป็นฟิลด์:

• ชื่อไฟล์แบบ hash output.filename เป็น bundle.[contenthash].js เสมอ ซึ่งล้างแคชของเบราว์เซอร์ทุกครั้งที่ bundle เปลี่ยน
• output ที่สะอาด output.clean: true จะล้างโฟลเดอร์ output ทุกครั้งที่ build ซึ่งเป็นตัวแทนของ clean-webpack-plugin ใน webpack 5
• CSS ถูกรวมเข้าไปใน bundle ไม่ได้ถูกแยกออกมา style-loader แทรกสไตล์ผ่าน JavaScript หากต้องการสร้างไฟล์ .css แยกสำหรับ production ให้เพิ่ม MiniCssExtractPlugin เอง
• พื้นฐานของ dev server เมื่อเปิดใช้งาน devServer จะตั้งค่า static, port: 3000 และ hot: true เพิ่มตัวเลือกอย่าง historyApiFallback หรือ proxy ด้วยตนเองหากแอปของคุณต้องการ

วิธีขยายเพิ่มเติม

ไฟล์ที่สร้างขึ้นเป็นจุดเริ่มต้น ไม่ใช่การตั้งค่า production ที่สมบูรณ์ ขั้นตอนถัดไปที่พบบ่อยซึ่งคุณเพิ่มเอง ได้แก่ MiniCssExtractPlugin สำหรับแยก CSS, sass-loader สำหรับ .scss, โมดูล asset ของ webpack 5 สำหรับรูปภาพและฟอนต์, ค่า devtool สำหรับ source map และบล็อก splitChunks สำหรับการแบ่งโค้ด