รักษาการควบคุม: A Guide to Webpack and React, Pt. 1

เผยแพร่แล้ว: 2022-03-11

เมื่อเริ่มต้นโครงการ React ใหม่ คุณมีเทมเพลตมากมายให้เลือก: สร้างแอป React, react-boilerplate และ React Starter Kit เป็นต้น

เทมเพลตเหล่านี้ซึ่งใช้โดยนักพัฒนาหลายพันคน สามารถรองรับการพัฒนาแอปพลิเคชันในวงกว้างได้ แต่พวกเขาปล่อยให้ประสบการณ์ของนักพัฒนาและบันเดิลเอาท์พุตแบกรับกับค่าเริ่มต้นต่างๆ ซึ่งอาจไม่เหมาะ

หากคุณต้องการรักษาระดับการควบคุมกระบวนการสร้างของคุณให้ดียิ่งขึ้น คุณอาจเลือกลงทุนในการกำหนดค่า Webpack แบบกำหนดเอง คุณจะได้เรียนรู้จากบทช่วยสอน Webpack นี้ งานนี้ไม่ซับซ้อนมากนัก และความรู้อาจมีประโยชน์แม้ในการแก้ไขปัญหาการกำหนดค่าของผู้อื่น

Webpack: เริ่มต้นใช้งาน

วิธีที่เราเขียน JavaScript ในปัจจุบันนั้นแตกต่างจากโค้ดที่เบราว์เซอร์สามารถดำเนินการได้ เรามักใช้ทรัพยากรประเภทอื่น ภาษาที่แปล และคุณลักษณะทดลองที่ยังไม่รองรับในเบราว์เซอร์รุ่นใหม่ Webpack เป็นโมดูลมัดรวมสำหรับ JavaScript ที่เชื่อมช่องว่างนี้และสร้างโค้ดที่เข้ากันได้ข้ามเบราว์เซอร์โดยไม่มีค่าใช้จ่ายเมื่อพูดถึงประสบการณ์ของนักพัฒนา

ก่อนที่เราจะเริ่มต้น คุณควรจำไว้ว่าโค้ดทั้งหมดที่นำเสนอในบทช่วยสอน Webpack นี้มีให้ในรูปแบบของไฟล์การกำหนดค่าตัวอย่าง Webpack/React ที่สมบูรณ์บน GitHub โปรดอ้างอิงจากที่นั่นและกลับมาที่บทความนี้หากคุณมีคำถามใดๆ

การกำหนดค่าพื้นฐาน

ตั้งแต่ Legato (เวอร์ชัน 4) Webpack ไม่ต้องการการกำหนดค่าใดๆ เพื่อรัน การเลือกโหมดบิลด์จะใช้ชุดค่าเริ่มต้นที่เหมาะสมกับสภาพแวดล้อมเป้าหมายมากกว่า ตามเจตนารมณ์ของบทความนี้ เราจะขจัดค่าเริ่มต้นเหล่านั้นออกไป และใช้การกำหนดค่าที่เหมาะสมกับสภาพแวดล้อมเป้าหมายแต่ละแห่งด้วยตัวเราเอง

ก่อนอื่นเราต้องติดตั้ง webpack และ webpack-cli :

 npm install -D webpack webpack-cli

จากนั้นเราจำเป็นต้องเติม webpack.config.js ด้วยการกำหนดค่าที่มีตัวเลือกต่อไปนี้:

  • devtool : เปิดใช้งานการสร้างแผนที่ต้นทางในโหมดการพัฒนา
  • entry : ไฟล์หลักของแอปพลิเคชัน React ของเรา
  • output.path : ไดเร็กทอรีรากสำหรับเก็บไฟล์เอาต์พุต
  • output.filename : รูปแบบชื่อไฟล์ที่จะใช้สำหรับไฟล์ที่สร้างขึ้น
  • output.publicPath : พาธไปยังไดเร็กทอรีรากที่ไฟล์จะถูกปรับใช้บนเว็บเซิร์ฟเวอร์
 const path = require("path"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; const isDevelopment = !isProduction; return { devtool: isDevelopment && "cheap-module-source-map", entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "assets/js/[name].[contenthash:8].js", publicPath: "/" } }; };

การกำหนดค่าด้านบนทำงานได้ดีสำหรับไฟล์ JavaScript ธรรมดา แต่เมื่อใช้ Webpack และ React เราจำเป็นต้องทำการเปลี่ยนแปลงเพิ่มเติมก่อนที่จะส่งรหัสไปยังผู้ใช้ของเรา ในส่วนถัดไป เราจะใช้ Babel เพื่อเปลี่ยนวิธีการโหลดไฟล์ JavaScript ของ Webpack

JS Loader

Babel เป็นคอมไพเลอร์ JavaScript ที่มีปลั๊กอินมากมายสำหรับการแปลงโค้ด ในส่วนนี้ เราจะแนะนำตัวโหลดเป็นตัวโหลดในการกำหนดค่า Webpack ของเรา และกำหนดค่าสำหรับการแปลงโค้ด JavaScript ที่ทันสมัยเป็นแบบที่เบราว์เซอร์ทั่วไปเข้าใจ

ขั้นแรก เราจะต้องติดตั้ง babel-loader และ @babel/core :

 npm install -D @babel/core babel-loader

จากนั้นเราจะเพิ่มส่วน module ในการกำหนดค่า Webpack ของเรา ทำให้ babel-loader รับผิดชอบในการโหลดไฟล์ JavaScript:

 @@ -11,6 +11,25 @@ module.exports = function(_env, argv) { path: path.resolve(__dirname, "dist"), filename: "assets/js/[name].[contenthash:8].js", publicPath: "/" + }, + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + use: { + loader: "babel-loader", + options: { + cacheDirectory: true, + cacheCompression: false, + envName: isProduction ? "production" : "development" + } + } + } + ] + }, + resolve: { + extensions: [".js", ".jsx"] } }; };

เราจะกำหนดค่า Babel โดยใช้ไฟล์การกำหนดค่าแยกต่างหาก babel.config.js จะใช้คุณสมบัติดังต่อไปนี้:

  • @babel/preset-env : เปลี่ยนฟีเจอร์ JavaScript ที่ทันสมัยเป็นโค้ดที่เข้ากันได้แบบย้อนหลัง
  • @babel/preset-react : แปลงไวยากรณ์ JSX เป็นการเรียกใช้ฟังก์ชัน JavaScript วานิลลาธรรมดา
  • @babel/plugin-transform-runtime : ลดการซ้ำซ้อนของโค้ดโดยแยกตัวช่วย Babel ออกเป็นโมดูลที่แชร์
  • @babel/plugin-syntax-dynamic-import : เปิดใช้งาน ไดนามิก import() ไวยากรณ์ในเบราว์เซอร์ที่ไม่มีการสนับสนุน Promise ดั้งเดิม
  • @babel/plugin-proposal-class-properties : เปิดใช้งานการสนับสนุนสำหรับข้อเสนอไวยากรณ์ฟิลด์อินสแตนซ์สาธารณะ สำหรับการเขียนส่วนประกอบ React ตามคลาส

นอกจากนี้เรายังจะเปิดใช้งานการเพิ่มประสิทธิภาพการผลิตเฉพาะ React บางอย่าง:

  • babel-plugin-transform-react-remove-prop-types ลบประเภทอุปกรณ์ประกอบฉากที่ไม่จำเป็นออกจากรหัสการผลิต
  • @babel/plugin-transform-react-inline-elements ประเมิน React.createElement ระหว่างการรวบรวมและอินไลน์ผลลัพธ์
  • @babel/plugin-transform-react-constant-elements แยกองค์ประกอบ React แบบคงที่เป็นค่าคงที่

คำสั่งด้านล่างจะติดตั้งการพึ่งพาที่จำเป็นทั้งหมด:

 npm install -D @babel/preset-env @babel/preset-react @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-class-properties babel-plugin-transform-react-remove-prop-types @babel/plugin-transform-react-inline-elements @babel/plugin-transform-react-constant-elements

จากนั้นเราจะเติม babel.config.js ด้วยการตั้งค่าเหล่านี้:

 module.exports = { presets: [ [ "@babel/preset-env", { modules: false } ], "@babel/preset-react" ], plugins: [ "@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties" ], env: { production: { only: ["src"], plugins: [ [ "transform-react-remove-prop-types", { removeImport: true } ], "@babel/plugin-transform-react-inline-elements", "@babel/plugin-transform-react-constant-elements" ] } } };

การกำหนดค่านี้ช่วยให้เราเขียน JavaScript สมัยใหม่ในลักษณะที่เข้ากันได้กับเบราว์เซอร์ที่เกี่ยวข้องทั้งหมด มีทรัพยากรประเภทอื่นๆ ที่เราอาจจำเป็นต้องใช้ในแอปพลิเคชัน React ซึ่งจะกล่าวถึงในส่วนต่อไปนี้

CSS Loader

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

  • css-loader : แยกวิเคราะห์ไฟล์ CSS, แก้ไขทรัพยากรภายนอก เช่น รูปภาพ ฟอนต์ และการนำเข้ารูปแบบเพิ่มเติม
  • style-loader : ระหว่างการพัฒนา แทรกสไตล์ที่โหลดลงในเอกสารขณะรันไทม์
  • mini-css-extract-plugin : แยกสไตล์ที่โหลดออกเป็นไฟล์แยกต่างหากสำหรับใช้งานจริงเพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์

มาติดตั้งตัวโหลด CSS ด้านบนกัน:

 npm install -D css-loader style-loader mini-css-extract-plugin

จากนั้นเราจะเพิ่มกฎใหม่ในส่วน module.rules ของการกำหนดค่า Webpack ของเรา:

 @@ -1,4 +1,5 @@ const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -25,6 +26,13 @@ module.exports = function(_env, argv) { envName: isProduction ? "production" : "development" } } + }, + { + test: /\.css$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : "style-loader", + "css-loader" + ] } ] },

เรายังจะเพิ่ม MiniCssExtractPlugin ในส่วน plugins ซึ่งเราจะเปิดใช้งานในโหมดการผลิตเท่านั้น:

 @@ -38,6 +38,13 @@ module.exports = function(_env, argv) { }, resolve: { extensions: [".js", ".jsx"] - } + }, + plugins: [ + isProduction && + new MiniCssExtractPlugin({ + filename: "assets/css/[name].[contenthash:8].css", + chunkFilename: "assets/css/[name].[contenthash:8].chunk.css" + }) + ].filter(Boolean) }; };

การกำหนดค่านี้ใช้ได้กับไฟล์ CSS ธรรมดา และสามารถขยายเพื่อทำงานกับโปรเซสเซอร์ CSS ต่างๆ เช่น Sass และ PostCSS ซึ่งเราจะพูดถึงในบทความถัดไป

โปรแกรมโหลดรูปภาพ

Webpack ยังสามารถใช้เพื่อโหลดทรัพยากรแบบคงที่ เช่น รูปภาพ วิดีโอ และไฟล์ไบนารีอื่นๆ วิธีทั่วไปในการจัดการไฟล์ประเภทนี้คือการใช้ file-loader หรือ url-loader ซึ่งจะให้ข้อมูลอ้างอิง URL สำหรับทรัพยากรที่จำเป็นแก่ผู้บริโภค

ในส่วนนี้ เราจะเพิ่ม url-loader เพื่อจัดการรูปแบบรูปภาพทั่วไป สิ่งที่ url-loader แตกต่างจาก file-loader คือหากขนาดของไฟล์ต้นฉบับเล็กกว่าเกณฑ์ที่กำหนด มันจะฝังไฟล์ทั้งหมดใน URL เป็นเนื้อหาที่เข้ารหัส base64 ดังนั้นจึงไม่จำเป็นต้องขอเพิ่มเติม

ก่อนอื่นเราติดตั้ง url-loader :

 npm install -D url-loader

จากนั้นเราเพิ่มกฎใหม่ในส่วน module.rules ของการกำหนดค่า Webpack ของเรา:

 @@ -34,6 +34,16 @@ module.exports = function(_env, argv) { isProduction ? MiniCssExtractPlugin.loader : "style-loader", "css-loader" ] + }, + { + test: /\.(png|jpg|gif)$/i, + use: { + loader: "url-loader", + options: { + limit: 8192, + name: "static/media/[name].[hash:8].[ext]" + } + } } ] },

SVG

สำหรับอิมเมจ SVG เราจะใช้ตัว @svgr/webpack ซึ่งแปลงไฟล์ที่นำเข้าเป็นส่วนประกอบ React

เราติดตั้ง @svgr/webpack :

 npm install -D @svgr/webpack

จากนั้นเราเพิ่มกฎใหม่ในส่วน module.rules ของการกำหนดค่า Webpack ของเรา:

 @@ -44,6 +44,10 @@ module.exports = function(_env, argv) { name: "static/media/[name].[hash:8].[ext]" } } + }, + { + test: /\.svg$/, + use: ["@svgr/webpack"] } ] },

ภาพ SVG เป็นส่วนประกอบ React นั้นสะดวก และ @svgr/webpack ทำการเพิ่มประสิทธิภาพโดยใช้ SVGO

หมายเหตุ: สำหรับแอนิเมชั่นบางอย่างหรือแม้แต่เอฟเฟกต์เมาส์โอเวอร์ คุณอาจต้องจัดการ SVG โดยใช้ JavaScript โชคดีที่ @svgr/webpack ฝังเนื้อหา SVG ลงในบันเดิล JavaScript โดยค่าเริ่มต้น ทำให้คุณสามารถเลี่ยงการจำกัดความปลอดภัยที่จำเป็นสำหรับสิ่งนี้

ตัวโหลดไฟล์

เมื่อเราต้องการอ้างอิงไฟล์ประเภทอื่น file-loader ทั่วไปจะทำงานได้ มันทำงานคล้ายกับ url-loader โดยให้ URL สินทรัพย์ไปยังโค้ดที่จำเป็นต้องใช้ แต่จะไม่พยายามเพิ่มประสิทธิภาพ

และเช่นเคย ขั้นแรกเราจะติดตั้งโมดูล Node.js ในกรณีนี้ file-loader :

 npm install -D file-loader

จากนั้นเราเพิ่มกฎใหม่ลงในส่วน module.rules ของการกำหนดค่า Webpack ของเรา ตัวอย่างเช่น:

 @@ -48,6 +48,13 @@ module.exports = function(_env, argv) { { test: /\.svg$/, use: ["@svgr/webpack"] + }, + { + test: /\.(eot|otf|ttf|woff|woff2)$/, + loader: require.resolve("file-loader"), + options: { + name: "static/media/[name].[hash:8].[ext]" + } } ] },

เราได้เพิ่ม file-loader สำหรับการโหลดฟอนต์ ซึ่งคุณสามารถอ้างอิงได้จากไฟล์ CSS ของคุณ คุณสามารถขยายตัวอย่างนี้เพื่อโหลดไฟล์ประเภทอื่นๆ ที่คุณต้องการ

ปลั๊กอินสภาพแวดล้อม

เราสามารถใช้ DefinePlugin DefinePlugin() ของ Webpack เพื่อแสดงตัวแปรสภาพแวดล้อมจากสภาพแวดล้อมการสร้างไปยังรหัสแอปพลิเคชันของเรา ตัวอย่างเช่น:

 @@ -1,5 +1,6 @@ const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const webpack = require("webpack"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -65,7 +66,12 @@ module.exports = function(_env, argv) { new MiniCssExtractPlugin({ filename: "assets/css/[name].[contenthash:8].css", chunkFilename: "assets/css/[name].[contenthash:8].chunk.css" - }) + }), + new webpack.DefinePlugin({ + "process.env.NODE_ENV": JSON.stringify( + isProduction ? "production" : "development" + ) + }) ].filter(Boolean) }; };

ที่นี่เราแทนที่ process.env.NODE_ENV ด้วยสตริงที่แสดงถึงโหมดบิลด์: "development" หรือ "production"

ปลั๊กอิน HTML

ในกรณีที่ไม่มีไฟล์ index.html ชุด JavaScript ของเราจะไม่มีประโยชน์ เพียงแค่นั่งอยู่ตรงนั้นโดยไม่มีใครสามารถค้นหาได้ ในส่วนนี้ เราจะแนะนำ html-webpack-plugin เพื่อสร้างไฟล์ HTML ให้เรา

เราติดตั้ง html-webpack-plugin :

 npm install -D html-webpack-plugin

จากนั้นเราเพิ่ม html-webpack-plugin ในส่วน plugins ของการกำหนดค่า Webpack ของเรา:

 @@ -1,6 +1,7 @@ const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const webpack = require("webpack"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -71,6 +72,10 @@ module.exports = function(_env, argv) { "process.env.NODE_ENV": JSON.stringify( isProduction ? "production" : "development" ) + }), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, "public/index.html"), + inject: true }) ].filter(Boolean) };

ไฟล์ public/index.html ที่สร้างขึ้นจะโหลดบันเดิลและบูตแอปพลิเคชันของเรา

การเพิ่มประสิทธิภาพ

มีเทคนิคการเพิ่มประสิทธิภาพหลายอย่างที่เราสามารถใช้ในกระบวนการสร้างของเรา เราจะเริ่มต้นด้วยการลดขนาดโค้ด ซึ่งเป็นกระบวนการที่เราสามารถลดขนาดของบันเดิลของเราได้โดยไม่มีค่าใช้จ่ายในแง่ของการทำงาน เราจะใช้ปลั๊กอินสองตัวเพื่อลดโค้ดของเรา: terser-webpack-plugin สำหรับโค้ด JavaScript และ optimize-css-assets-webpack-plugin สำหรับ CSS

มาติดตั้งกันเลย:

 npm install -D terser-webpack-plugin optimize-css-assets-webpack-plugin

จากนั้นเราจะเพิ่มส่วน optimization ให้กับการกำหนดค่าของเรา:

 @@ -2,6 +2,8 @@ const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); +const TerserWebpackPlugin = require("terser-webpack-plugin"); +const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -75,6 +77,27 @@ module.exports = function(_env, argv) { isProduction ? "production" : "development" ) }) - ].filter(Boolean) + ].filter(Boolean), + optimization: { + minimize: isProduction, + minimizer: [ + new TerserWebpackPlugin({ + terserOptions: { + compress: { + comparisons: false + }, + mangle: { + safari10: true + }, + output: { + comments: false, + ascii_only: true + }, + warnings: false + } + }), + new OptimizeCssAssetsPlugin() + ] + } }; };

การตั้งค่าข้างต้นจะช่วยให้มั่นใจว่าโค้ดเข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด

การแยกรหัส

การแยกโค้ดเป็นอีกเทคนิคหนึ่งที่เราสามารถใช้เพื่อปรับปรุงประสิทธิภาพของแอปพลิเคชันของเรา การแยกรหัสสามารถอ้างถึงสองแนวทางที่แตกต่างกัน:

  1. ด้วยการใช้คำสั่ง dynamic import() เราสามารถแยกส่วนต่าง ๆ ของแอปพลิเคชันที่ประกอบขึ้นจากขนาดกลุ่มใหญ่ของเรา และโหลดได้ตามต้องการ
  2. เราสามารถดึงโค้ดที่เปลี่ยนแปลงได้น้อยลง เพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์และปรับปรุงประสิทธิภาพสำหรับผู้เยี่ยมชมซ้ำ

เราจะใส่ข้อมูลในส่วน optimization.splitChunks ของการกำหนดค่า Webpack ของเราด้วยการตั้งค่าสำหรับการแยกการพึ่งพาบุคคลที่สามและส่วนทั่วไปออกเป็นไฟล์แยกกัน:

 @@ -99,7 +99,29 @@ module.exports = function(_env, argv) { sourceMap: true }), new OptimizeCssAssetsPlugin() - ] + ], + splitChunks: { + chunks: "all", + minSize: 0, + maxInitialRequests: 20, + maxAsyncRequests: 20, + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + name(module, chunks, cacheGroupKey) { + const packageName = module.context.match( + /[\\/]node_modules[\\/](.*?)([\\/]|$)/ + )[1]; + return `${cacheGroupKey}.${packageName.replace("@", "")}`; + } + }, + common: { + minChunks: 2, + priority: -10 + } + } + }, + runtimeChunk: "single" } }; };

มาดูตัวเลือกต่างๆ ที่เราใช้กันอย่างลึกซึ้งยิ่งขึ้นกัน:

  • chunks: "all" : โดยค่าเริ่มต้น การแยกส่วนทั่วไปจะมีผลกับโมดูลที่โหลดด้วย dynamic import() เท่านั้น การตั้งค่านี้เปิดใช้งานการปรับให้เหมาะสมสำหรับการโหลดจุดเข้าใช้งานเช่นกัน
  • minSize: 0 : โดยค่าเริ่มต้น เฉพาะส่วนที่เกินเกณฑ์ขนาดที่กำหนดเท่านั้นที่จะมีสิทธิ์ได้รับการแยก การตั้งค่านี้เปิดใช้งานการปรับให้เหมาะสมสำหรับรหัสทั่วไปทั้งหมดโดยไม่คำนึงถึงขนาด
  • maxInitialRequests: 20 และ maxAsyncChunks: 20 : การตั้งค่าเหล่านี้เพิ่มจำนวนไฟล์ต้นฉบับสูงสุดที่สามารถโหลดพร้อมกันได้สำหรับการนำเข้าจุดเข้าใช้งานและการนำเข้าจุดแยก ตามลำดับ

นอกจากนี้ เราระบุการกำหนดค่า cacheGroups ต่อไปนี้:

  • vendors : กำหนดค่าการแยกสำหรับโมดูลบุคคลที่สาม
    • test: /[\\/]node_modules[\\/]/ : รูปแบบชื่อไฟล์สำหรับการจับคู่การอ้างอิงของบุคคลที่สาม
    • name(module, chunks, cacheGroupKey) : กลุ่มแยกส่วนต่างๆ ออกจากโมดูลเดียวกันโดยตั้งชื่อร่วมกัน
  • common : กำหนดค่าการแยกส่วนทั่วไปจากรหัสแอปพลิเคชัน
    • minChunks: 2 : อันหนึ่งจะถือว่าใช้ร่วมกัน ถ้าอ้างอิงจากอย่างน้อยสองโมดูล
    • priority: -10 : กำหนดลำดับความสำคัญเชิงลบให้กับกลุ่มแคช common เพื่อให้พิจารณากลุ่มแคชสำหรับ vendors ก่อน

นอกจากนี้เรายังแยกโค้ดรันไทม์ของ Webpack เป็นอันเดียวที่สามารถแชร์ระหว่างจุดเข้าใช้งานหลายจุด โดยระบุ runtimeChunk: "single"

เซิร์ฟเวอร์เดฟ

จนถึงตอนนี้ เราได้มุ่งเน้นที่การสร้างและเพิ่มประสิทธิภาพบิลด์การผลิตของแอปพลิเคชันของเรา แต่ Webpack ยังมีเว็บเซิร์ฟเวอร์ของตัวเองพร้อมการรีโหลดแบบสดและการรายงานข้อผิดพลาด ซึ่งจะช่วยให้เราในกระบวนการพัฒนา เรียกว่า webpack-dev-server และเราจำเป็นต้องติดตั้งแยกต่างหาก:

 npm install -D webpack-dev-server

ในตัวอย่างนี้ เราแนะนำส่วน devServer ในการกำหนดค่า Webpack ของเรา:

 @@ -120,6 +120,12 @@ module.exports = function(_env, argv) { } }, runtimeChunk: "single" + }, + devServer: { + compress: true, + historyApiFallback: true, + open: true, + overlay: true } }; };

ที่นี่เราใช้ตัวเลือกต่อไปนี้:

  • compress: true : เปิดใช้งานการบีบอัดเนื้อหาเพื่อการรีโหลดที่เร็วขึ้น
  • historyApiFallback: true : เปิดใช้งานทางเลือกสำรองของ index.html สำหรับการกำหนดเส้นทางตามประวัติ
  • open: true : เปิดเบราว์เซอร์หลังจากเปิดเซิร์ฟเวอร์ dev
  • overlay: true : แสดงข้อผิดพลาด Webpack ในหน้าต่างเบราว์เซอร์

คุณอาจต้องกำหนดการตั้งค่าพร็อกซีเพื่อส่งต่อคำขอ API ไปยังเซิร์ฟเวอร์ส่วนหลัง

Webpack and React: เพิ่มประสิทธิภาพและพร้อม!

เราเพิ่งได้เรียนรู้วิธีโหลดทรัพยากรประเภทต่างๆ ด้วย Webpack วิธีใช้ Webpack ในสภาพแวดล้อมการพัฒนา และเทคนิคต่างๆ สำหรับการเพิ่มประสิทธิภาพบิลด์ที่ใช้งานจริง หากต้องการ คุณสามารถตรวจสอบไฟล์การกำหนดค่าทั้งหมดเพื่อหาแรงบันดาลใจสำหรับการตั้งค่า React/Webpack ของคุณเองได้ การฝึกฝนทักษะดังกล่าวถือเป็นมาตรฐานสำหรับทุกคนที่ให้บริการพัฒนา React

ในส่วนถัดไปของชุดนี้ เราจะขยายการกำหนดค่านี้พร้อมคำแนะนำสำหรับกรณีการใช้งานที่เฉพาะเจาะจงมากขึ้น รวมถึงการใช้งาน TypeScript, ตัวประมวลผลล่วงหน้า CSS และเทคนิคการเพิ่มประสิทธิภาพขั้นสูงที่เกี่ยวข้องกับการแสดงผลฝั่งเซิร์ฟเวอร์และ ServiceWorkers คอยติดตามเพื่อเรียนรู้ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ Webpack เพื่อนำแอปพลิเคชัน React ของคุณไปสู่การผลิต