หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

หมายเหตุ: โครงการนี้ไม่ได้รับการบำรุงรักษาอีกต่อไป

น่าเสียดายที่ฉันไม่มีเวลา/กระตือรือร้นที่จะดูแลโครงการนี้ต่อไป ฉันแนะนำให้แยกโปรเจ็กต์นี้หรืออ่านแหล่งที่มาเพื่อเรียนรู้วิธีสร้าง

tris-webpack-หม้อต้ม

ต้นแบบ webpack นี้เหมาะสำหรับนักพัฒนามือใหม่ ระดับกลาง และระดับสูงที่ต้องการสร้างเว็บไซต์แบบคงที่ได้อย่างรวดเร็ว ขณะเดียวกันก็ได้รับการเพิ่มประสิทธิภาพที่เหมาะสมทั้งหมดเพื่อให้ได้คะแนนที่สมบูรณ์แบบใน Google Page Speed ​​Insights และ Google Lighthouse Reports — นี่คือวิวัฒนาการของ tris-gulp-boilerplate ซึ่งขณะนี้มี Webpack 4 Webpack เป็นมาตรฐานใหม่สำหรับการรวม JS ซึ่ง Gulp ไม่สามารถทำได้ โชคดีที่ Webpack สามารถรันงานและรวม js ได้

เป้าหมายของโครงการ/ต้นแบบนี้คือการเข้าถึงบุคคลต่อไปนี้:

  1. ผู้เริ่มต้น ? — ผู้ที่แม้จะใช้ Gulp/Webpack/Node/Npm ยังคงต้องการคำอธิบายที่ละเอียดมากกว่านักพัฒนาที่คุ้นเคย พวกเขาต้องการให้สิ่งต่าง ๆ ได้ผล แต่พวกเขาต้องการรู้ ว่าอย่างไร และ ทำไม เช่นกัน

  2. นักธุรกิจไซด์โปรเจ็กต์ ?‍♀️ — ผู้ที่มีไอเดียเจ๋งๆ แต่ไม่อยากเสียเวลากับการตั้งค่า พวกเขาจำเป็นต้องเผยแพร่แนวคิด แอป และเว็บไซต์ของตนเข้าสู่เบราว์เซอร์... อย่างรวดเร็ว

  3. ‍♂️ ผู้ครอบงำจิตใจ — ผู้ที่รักการได้รับคะแนนที่สมบูรณ์แบบจากประสิทธิภาพและการเพิ่มประสิทธิภาพรายงาน ผู้ที่ได้รับการจัดระเบียบทางดิจิทัลและภาคภูมิใจที่รู้ว่าไฟล์ทั้งหมดของตนถูกย่อขนาด บีบอัด บีบอัด และพร้อมที่จะจัดส่ง!

อย่าลังเลที่จะแยก repo นี้และสร้างเวิร์กโฟลว์ของคุณเองโดยใช้เทมเพลตนี้! ทุกคนมีความแตกต่างกันเล็กน้อย ฉันเข้าใจ

การใช้งาน

คุณต้องมี git และ node.js บนคอมพิวเตอร์ของคุณก่อนที่จะทำงาน

  1. git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name

  2. cd your-project-name && rm -rf .git

  3. npm install

  4. npm start

คุณพร้อมแล้ว เริ่มเขียนโค้ด ?‍?‍ !

ลบทุกอย่างในโฟลเดอร์ src/styles/ , src/index.html และ src/index.scss/ หากคุณต้องการเริ่มต้นใหม่ 100% และ/หรือสร้างเวิร์กโฟลว์ Sass ของคุณเอง ฉันยึดโครงสร้างโฟลเดอร์ตามรูปแบบ 7-1

  1. npm run build เมื่อคุณพร้อมที่จะอัปโหลดไซต์ของคุณไปยังแพลตฟอร์ม FTP / โฮสติ้งที่คุณเลือก สิ่งนี้จะสร้างโฟลเดอร์ dist พร้อมเนื้อหาเว็บไซต์ของคุณทั้งหมดที่ได้รับการปรับปรุงและบีบอัด

หากคุณต้องการคำอธิบายเชิงลึกเกี่ยวกับวิธีการทำงานทั้งหมด โปรดอ่านเกี่ยวกับคุณสมบัติด้านล่าง หรือเขียนโค้ดต่อไปและสนุกไปกับมัน :)

คุณสมบัติ/เนื้อหา

  • tris-webpack-หม้อต้ม

  • การใช้งาน

  • คุณสมบัติ/เนื้อหา

  • อธิบายคุณสมบัติแล้ว

    • แยกการกำหนดค่า Webpack

    • เซิร์ฟเวอร์การพัฒนา Webpack

    • เนื้อหา HTML และการลดขนาด

    • ไม่พบหน้า 404

    • การเพิ่มประสิทธิภาพ SCSS เป็น CSS +

    • การถ่ายทอด ES6

    • รายการเบราว์เซอร์

    • เนื้อหารูปภาพ + การบีบอัด

    • การโหลดแบบอักษร + การโหลดล่วงหน้า

    • การบีบอัดสินทรัพย์

    • ทำความสะอาดปลั๊กอิน Webpack

    • แผนที่แหล่งที่มา

    • การสร้าง Favicon

    • ออฟไลน์ก่อนและแคช

    • โปรเกรสซีฟเว็บแอป (PWA)

  • ก๊อตชา

  • มีส่วนร่วม

อธิบายคุณสมบัติแล้ว

แยกการกำหนดค่า Webpack

แทนที่จะมี webpack.config.js ขนาดใหญ่เพียงอันเดียว เราจะแยกเวอร์ชันที่ใช้งานจริงและการพัฒนาออกเป็นการกำหนดค่าใหม่ 2 รายการที่เรียกว่า webpack.dev.js และ webpack.prod.js การกำหนดค่าที่เราต้องการทั้งในการพัฒนาและการใช้งานจริงจะอยู่ในการกำหนดค่า webpack.common.js

เมื่อเรารัน npm start มันจะรัน build การพัฒนาตามการกำหนดค่า webpack.dev.js ซึ่งมีการกำหนดค่า webpack.common.js ที่รวมเข้าด้วยกันด้วย อ่านเพิ่มเติมเกี่ยวกับสิ่งนี้ในเอกสารประกอบของ Webpack

 /* wenpack.dev.js */const merge = need("webpack-merge");const common = need("./webpack.common.js");/* ผสาน webpack.common.js จากนั้นคุณเพิ่ม พิเศษของคุณ */module.exports = merge(common, {
  โหมด: "การพัฒนา"
  /* โค้ดที่เหลืออยู่ที่นี่ */});

เมื่อเรารัน npm run build มันจะรัน build ที่ใช้งานจริงโดยอิงจากการกำหนดค่า webpack.prod.js ซึ่งมีการกำหนดค่า webpack.common.js ที่ผสานรวมด้วย

 /* webpack.prod.js */const merge = need("webpack-merge");const common = need("./webpack.common.js");/* ผสาน webpack.common.js จากนั้นคุณเพิ่ม พิเศษของคุณ */module.exports = merge(common, {
  โหมด: "การผลิต",});

เราต้องการให้รุ่นการพัฒนาและการผลิตของเราสร้างผลลัพธ์เดียวกันในเบราว์เซอร์ คุณคงไม่อยากเขียนโค้ดให้เสร็จ รันบิลด์ จากนั้นมีเว็บไซต์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิงในบิลด์ที่มีรูปภาพหายไป เป็นต้น นั่นเป็นเหตุผลที่เรามี webpack.common.js เพื่อจัดการตัวโหลดและการจัดการสินทรัพย์ทั้งหมด webpack.dev.js จะแตกต่างเล็กน้อยกับซอร์สแมปที่มีน้ำหนักเบากว่า สุดท้าย webpack.prod.js จะจัดการขั้นตอนสุดท้ายทั้งหมดในการทำให้เว็บไซต์ของคุณใช้งานได้จริง นั่นก็คือการบีบอัดรูปภาพ การบีบอัดเนื้อหา (gzip) การลดขนาดสินทรัพย์ การสร้างไอคอน favicon การแคช และการสร้างประสบการณ์ออฟไลน์ครั้งแรก

ฉันจะอธิบายแต่ละขั้นตอนด้านล่าง

เซิร์ฟเวอร์การพัฒนา Webpack

webpack-dev-server ได้รับการกำหนดค่าใน package.json npm start จะรันเซิร์ฟเวอร์และเปิดโปรเจ็กต์ของคุณในเบราว์เซอร์โดยใช้การกำหนดค่า webpack.dev.js npm start เป็นสคริปต์เริ่มต้นของ npm ดังนั้นคุณไม่จำเป็นต้องเพิ่ม run เข้าไป แต่สำหรับสคริปต์บิลด์คุณต้องพิมพ์ npm run build

 "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"},

เนื้อหา HTML และการลดขนาด

เราใช้ html-loader เพื่อส่งออก HTML เป็นสตริงและลดขนาดเอาต์พุต ซึ่งจะทำให้คุณสามารถนำเข้า src/index.html ภายใน src/index.js ของคุณได้ เราสามารถย่อขนาด HTML ด้วยตัวเลือกตัวโหลดย่อ minimize: true ดังนั้นนี่คือเหตุผลที่เราปล่อยมันไว้ใน webpack.common.js แทนที่จะย้ายไปที่ webpack.prod.js

 /* webpack.common.js */{
  ทดสอบ: /.html$/,
  ใช้: [{loader: 'html-loader', ตัวเลือก: { ย่อเล็กสุด: true}
  -
 /* src/index.js */นำเข้า "./index.html";

จากนั้นเราใช้ html-webpack-plugin เพื่อสร้าง index.html ที่สร้างขึ้นใหม่พร้อมการนำเข้าเนื้อหาที่ถูกต้องทั้งหมด

ตัวเลือก template: คือที่ที่คุณจะดึง HTML ต้นฉบับของคุณมา คุณสามารถใช้เทมเพลต html, เทมเพลตแฮนด์บาร์ หรือเทมเพลตอื่นๆ เหล่านี้ได้

ตัวเลือก inject: คือตำแหน่งที่ทรัพย์สินของคุณจะไป Webpack จะวางสคริปต์ webpack-bundle.js ที่รวมไว้ที่ด้านล่างของเนื้อหาตามค่าเริ่มต้น แต่ที่นี่ฉันเปลี่ยนเป็น head เนื่องจากเราจะใช้ script-ext-html-webpack-plugin เพื่อเพิ่มแอตทริบิวต์ defer ให้กับ script และวางไว้ที่ส่วนหัวของเว็บไซต์ สิ่งนี้ช่วยในเรื่องประสิทธิภาพ

 /* webpack.common.js */const HtmlWebpackPlugin = need('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = need("script-ext-html-webpack-plugin");ปลั๊กอิน: [
  ใหม่ HtmlWebpackPlugin ({ชื่อ: 'tris-webpack-boilerplate', ชื่อไฟล์: 'index.html', เทมเพลต: './src/index.html', แทรก: 'head'
  -
  ใหม่ HtmlWebpackPlugin ({ชื่อ: 'tris-404-page', ชื่อไฟล์: '404.html', เทมเพลต: './src/404.html', inject: 'head'
  -
  ใหม่ ScriptExtHtmlWebpackPlugin ({defaultAttribute: 'defer'
  -

เพิ่มปลั๊กอิน new HtmlWebpackPlugin({}) ต่อไป หากคุณต้องการมีเว็บไซต์หลายหน้า ตั้งชื่อเพจให้เหมาะสมกับ title: คีย์

ไม่พบหน้า 404

Netlify เป็นบริการฟรีที่ยอดเยี่ยมที่ให้คุณจัดการและปรับใช้เว็บไซต์ของคุณ Netlify ค้นหา 404.html โดยอัตโนมัติ และจะโหลดหน้านั้นเมื่อมีคนพยายามเปิดลิงก์ที่ใช้งานไม่ได้บนเว็บไซต์ของคุณ ไม่มีอะไรให้คุณกังวล

หากคุณใช้บริการอื่น โปรดหาข้อมูลเกี่ยวกับวิธีการเชื่อมโยงหน้า 404.html ของคุณเพื่อให้ใช้งานได้ เป็นวิธีที่ดีในการส่งผู้คนกลับไปที่หน้าหลักของคุณหากพวกเขาไปที่ลิงก์เสีย

การเพิ่มประสิทธิภาพ SCSS เป็น CSS +

ในการใช้ Sass/SCSS เราจำเป็นต้องใช้ตัวโหลดสองสามตัวเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ CSS-loader, postcss-loader และ sass-loader

test: ใช้ regex (นิพจน์ทั่วไป) เพื่อตรวจสอบไฟล์ sass, scss หรือ css ใด ๆ จากนั้นเรียกใช้งานผ่านตัวโหลดทั้งสามนี้ ซึ่งพันรอบ mini-css-extract-plugin ซึ่งจะสร้างไฟล์ CSS ไฟล์เดียวสำหรับคุณ เพื่อนำไปใช้ในการผลิต

อ่านเพิ่มเติมเกี่ยวกับแนวคิดของตัวตัก

 /* webpack.common.js */{
  ทดสอบ: /.(sa|sc|c)ss$/,
  ใช้: [MiniCssExtractPlugin.loader,{ ตัวโหลด: 'css-loader', ตัวเลือก: {sourceMap: true }},{ ตัวโหลด: 'postcss-loader', ตัวเลือก: {sourceMap: true }},{ ตัวโหลด: 'sass-loader ' ตัวเลือก: {sourceMap: true }}
  -

ส่วนที่สองของลำดับตัวโหลดคือ postcss-loader ซึ่งเป็นที่ที่คุณจะย่อขนาดและกำหนดคำนำหน้า css ของคุณโดยอัตโนมัติ เมื่อต้องการทำเช่นนี้ เราสร้าง postcss.config.js ที่รากของโครงการ และกำหนดค่าเช่นนั้น...

 /* postcss.config.js */const purgecss = need("@fullhuman/postcss-purgecss");module.exports = {
  ปลั๊กอิน: [require("autoprefixer"),require("cssnano")({ preset: "default",}),purgecss({ content: ["./**/*.html"], คีย์เฟรม: true,} )
  -

อ่านคำนำหน้าอัตโนมัติและ cssnano เพื่อกำหนดค่าตามที่คุณต้องการมากขึ้นหากจำเป็น อ่านเพิ่มเติมเกี่ยวกับ postcss โดยทั่วไปเนื่องจากเป็นเครื่องมือที่ทรงพลังมากในคลังแสงของคุณ

Purgecss เป็นปลั๊กอิน postcss ที่ยอดเยี่ยมสำหรับการกำจัด CSS ที่ไม่ได้ใช้ในโค้ดของคุณ Purgecss วิเคราะห์เนื้อหาและไฟล์ css ของคุณ จากนั้นจะจับคู่ตัวเลือกที่ใช้ในไฟล์ของคุณกับตัวเลือกในไฟล์เนื้อหาของคุณ มันจะลบตัวเลือกที่ไม่ได้ใช้ออกจาก css ของคุณ ส่งผลให้ไฟล์ css มีขนาดเล็กลง

มันพร้อมใช้งานตามค่าเริ่มต้นแล้ว แต่ถ้าคุณต้องการทดสอบด้วยสายตาด้วยตัวเอง ให้ยกเลิกการใส่เครื่องหมายข้อคิดเห็น @import "../node_modules/bulma/bulma"; ใน index.scss จากนั้นรัน npm run build และดูผล webpack-bundle.css ในโฟลเดอร์ dist ของคุณ คุณจะสังเกตเห็นว่าไม่มีรหัสมากนัก จากนั้นลบ purgecss ออกจาก postcss.config.js ของคุณแล้วรัน npm run build อีกครั้ง คุณจะสังเกตเห็นว่ามีโค้ดมากกว่า 10,000 บรรทัดใน css ของคุณที่มาจากเฟรมเวิร์ก Bulma อย่างที่คุณเห็น purgecss นั้นสมบูรณ์แบบสำหรับการกำจัด CSS ที่คุณไม่ได้ใช้เมื่อใช้เฟรมเวิร์กขนาดใหญ่ เช่น Bootstrap, Foundation, Bulma ฯลฯ!

mini-css-extract-plugin เป็นขั้นตอนสุดท้ายในการแยก CSS และตั้งชื่อก่อนที่จะส่งออก

 /* webpack.common.js */const MiniCssExtractPlugin = need("mini-css-extract-plugin");ปลั๊กอิน: [
  MiniCssExtractPlugin ใหม่ ({ชื่อไฟล์: 'webpack-bundle.css', ชื่อไฟล์ก้อน: '[id] .css'
  -

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

การถ่ายทอด ES6

คุณอาจต้องการใช้คุณสมบัติและไวยากรณ์ JavaScript ล่าสุด แต่เบราว์เซอร์บางรุ่นยังไม่รองรับ บาเบลจะจัดการเรื่องนั้นให้เรา

ที่นี่เรากำลังทดสอบไฟล์ js ทั้งหมด แต่ไม่รวมโฟลเดอร์ node_modules จากนั้นรันผ่าน babel-loader ด้วยการตั้งค่าล่วงหน้า babel-preset-env

 /* webpack.common.js */{
  ทดสอบ: /.js$/,
  ยกเว้น: /(node_modules)/,
  ใช้: {ตัวโหลด: 'babel-loader', ตัวเลือก: { ค่าที่ตั้งไว้ล่วงหน้า: ['@babel/preset-env']}
  -

คราวนี้เรากำลังเข้าสู่ไฟล์ webpack.prod.js เมื่อเรา npm run build เอาต์พุต js ของเราจะถูกย่อให้เล็กลงและมีซอร์สแมปแบบเต็ม การทำงานในโหมด dev โดย npm start เราจะยังคงมีซอร์สแมปที่เบากว่า แต่ js จะไม่ถูกย่อเล็กสุด

 /* webpack.prod.js */const TerserPlugin = need("terser-webpack-plugin");module.exports = ผสาน (ทั่วไป, {
  โหมด: "การผลิต"
  devtool: "แผนที่ต้นทาง",
  การเพิ่มประสิทธิภาพ: {minimizer: [ new TerserPlugin({test: /.js(?.*)?$/i,parallel: true,sourceMap: true, }),],
  -

อ่านเพิ่มเติมเกี่ยวกับตัวเลือกในเอกสารประกอบของ terser

รายการเบราว์เซอร์

ที่นี่เราต้องการมีที่เดียวที่เราสามารถบอกเครื่องมือบางอย่างได้ว่าเราต้องการเพิ่มการรองรับเบราว์เซอร์ใดบ้าง เราทำสิ่งนี้ได้โดยใช้รายการเบราว์เซอร์และไฟล์ .browserslistrc ที่เกี่ยวข้องในรูทโปรเจ็กต์ Autoprefixer และ babel-present-env จะรับไฟล์นี้และใช้สิ่งที่จำเป็นตามการกำหนดค่า

อ่านข้อมูลเพิ่มเติมเกี่ยวกับสิ่งอื่นๆ ที่คุณสามารถส่งผ่านไปยัง .browserslistrc และใช้ browserl.ist เพื่อดูว่าเบราว์เซอร์ใดบ้างที่จะถูกกำหนดเป้าหมายเป็นพิเศษด้วยการกำหนดค่าของคุณ โอเค ฉันคิดว่าฉันพูดเบราว์เซอร์มามากพอแล้วใช่ไหม

 /* .browserslistrc */> 0.25% ยังไม่ตาย

เนื้อหารูปภาพ + การบีบอัด

ขั้นแรกเราทดสอบ jpeg, jpg, PNG, gif และ svg โดยใช้ regex (นิพจน์ทั่วไป) จากนั้นเราจะใช้ตัวโหลดไฟล์ ซึ่งจะแก้ไขการนำเข้าและต้องการไฟล์ลงใน url จากนั้นส่งไฟล์ไปยังไดเร็กทอรีเอาต์พุต ดังนั้นหากคุณใช้องค์ประกอบ <img> ที่ดึงไฟล์จากโฟลเดอร์ src/images ไฟล์นั้นจะถูกนำเข้าและส่งไปยัง images เส้นทางเอาต์พุตที่ระบุ ซึ่งท้ายที่สุดจะเป็น src/images หากคุณ npm start (รัน dev) หรือ npm run build (รัน build)

 /* webpack.common.js */{
  ทดสอบ: /.(jpe?g|png|gif|svg)$/,
  ใช้: [{loader: 'file-loader', ตัวเลือก: { ชื่อ: '[ชื่อ]. [ext]', outputPath: 'images/', publicPath: 'images/'},
  -

ตอนนี้เราต้องการเพิ่มประสิทธิภาพอิมเมจของเราบน npm run build เท่านั้น ดังนั้นเราจึงแก้ไข webpack.prod.js ของเราตามด้านล่างนี้

เราทดสอบ jpeg, jpg, PNG, gif และ svg อีกครั้งโดยใช้ regex และใช้การปรับให้เหมาะสมที่เหมาะสม gifsicle เป็นคอมเพรสเซอร์ gif แบบไม่สูญเสีย pngquant เป็นคอมเพรสเซอร์ png ที่สูญเสีย และเราสามารถเพิ่มปลั๊กอินพิเศษที่เรียกว่า imageminMozjpeg เพื่อทำการบีบอัด jpg/jpeg ที่สูญหายได้ ทางออกที่ปลอดภัยคือการตั้งค่าคุณภาพระหว่าง 75-90 และคุณควรได้รับการบีบอัดข้อมูลที่เหมาะสมโดยไม่สูญเสียคุณภาพที่มองเห็นได้

ฉันขอแนะนำให้ใช้การบีบอัดแบบไม่สูญเสียข้อมูล และครอบตัดรูปภาพให้มีขนาดที่เหมาะสมก่อนที่จะเพิ่มลงในโปรเจ็กต์ของคุณ เพียงลบส่วนคีย์ imageminMozjpeg และ pngquant เพื่อดำเนินการดังกล่าว

คุณยังสามารถใช้ Tinypng เพื่อบีบอัดรูปภาพได้อีกด้วย

 /* webpack.prod.js */const ImageminPlugin = need("imagemin-webpack-plugin").default;const imageminMozjpeg = need("imagemin-mozjpeg");ปลั๊กอิน: [
  ใหม่ ImageminPlugin ({ทดสอบ: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // lossless gif การเพิ่มประสิทธิภาพคอมเพรสเซอร์ระดับ: 9,},pngquant: { // คอมเพรสเซอร์ png ที่สูญเสีย, ลบออกสำหรับการสูญเสียเริ่มต้นที่ไม่สูญเสีย คุณภาพ: "75",}, ปลั๊กอิน: [ imageminMozjpeg ({// คอมเพรสเซอร์ jpg ที่สูญเสีย, ลบออกเพื่อคุณภาพที่ไม่สูญเสียเริ่มต้น: "75", }),],
  -

การโหลดแบบอักษร + การโหลดล่วงหน้า

ที่นี่เรากำลังทดสอบส่วนขยายแบบอักษรทั่วไปทั้งหมด และใช้ตัวโหลดไฟล์อีกครั้งเพื่อแก้ไขการนำเข้าและส่งออกแบบอักษรของเรา

 /* webpack.common.js */{
  ทดสอบ: /.(woff|woff2|ttf|otf)$/,
  ใช้: [{loader: 'file-loader', ตัวเลือก: { ชื่อ: '[ชื่อ]. [ext]', outputPath: 'fonts/', publicPath: 'fonts/'},
  -

ใน src/styles/base/_typography.scss ของเรา เรากำลังโหลดแบบอักษรผ่านกฎ @font-face Google Webfonts Helper ยังเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการโฮสต์ Google Fonts ด้วยตนเองโดยไม่ยุ่งยาก อ่านเพิ่มเติมเกี่ยวกับกฎ @font-face บน CSS-tricks นอกจากนี้ โปรดอ่านคุณสมบัติการแสดงแบบอักษรด้วย

แนวทางปฏิบัติที่ดีที่สุดคือการโหลดแบบอักษรของคุณล่วงหน้า เราจะบรรลุเป้าหมายนั้นโดยใช้ preload-webpack-plugin และคุณจะต้องวางไว้หลัง HtmlWebpackPlugin เพื่อให้ทำงานได้อย่างถูกต้อง

 /* webpack.common.js */PreloadWebpackPlugin ใหม่ ({
  rel: 'โหลดล่วงหน้า',
  as(entry) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) กลับ 'แบบอักษร';
  -
  fileWhitelist: [/.(woff|woff2|ttf|otf)$/],
  รวมไปถึง: 'allAssets'})

การบีบอัดสินทรัพย์

ที่นี่เรากลับมาในการกำหนดค่า webpack.prod.js โดยใช้ Compression-webpack-plugin เพื่อบีบอัด เฉพาะ ไฟล์ html, css และ javascript นี่เป็นการหลีกเลี่ยงการบีบอัดไฟล์ซอร์สแมปที่สร้างขึ้น

 /* webpack.prod.js */module.exports = ผสาน (ทั่วไป, {
  โหมด: 'การผลิต'
  ปลั๊กอิน: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // only added html/css/js, ข้ามการบีบอัด sourcemaps ฯลฯ}),});

ทำความสะอาดปลั๊กอิน Webpack

Clean-webpack-plugin เป็นเพียงปลั๊กอิน webpack ง่ายๆ สำหรับลบ/ล้างโฟลเดอร์ build ของคุณก่อนที่จะสร้างใหม่ ดูโครงสร้างโฟลเดอร์ของคุณในขณะที่คุณรัน npm run build หรือ npm start โฟลเดอร์ dist ปัจจุบันของคุณ (หากคุณสร้างไว้ก่อนหน้านี้) จะถูกลบและโฟลเดอร์ใหม่จะปรากฏขึ้นทันทีหลังจากนั้น

 /* webpack.common.js */const CleanWebpackPlugin = need("clean-webpack-plugin");ปลั๊กอิน: [ใหม่ CleanWebpackPlugin(["dist"])];

แผนที่แหล่งที่มา

การใช้ซอร์สแมปถือเป็นสิ่งสำคัญสำหรับการดีบักโค้ดของคุณในเครื่องมือ dev

ดังที่คุณเห็นเมื่อคุณ npm start และเปิด devtools ใน Chrome จากนั้นคลิกที่คอนโซล คุณจะเห็นว่ามีสอง console.logs ที่มาจาก script.js บรรทัดที่ 1 และ 2 เราสามารถเห็นสิ่งนี้ได้อย่างง่ายดายในโครงสร้างโฟลเดอร์ของเราที่ src/scripts/script.js หากเราไม่ได้ใช้ sourcemaps devtools จะแสดงให้เราเห็นว่า console.logs เหล่านี้มาจาก webpack-bundle.js ที่รวมมาของเรา ซึ่งไม่ได้มีประโยชน์มากนัก

กรณีที่คล้ายกันกับสไตล์ของเรา หากคุณดูที่องค์ประกอบ body ใน devtools คุณจะเห็นบางสไตล์ที่ปรับใช้จากไฟล์ _global.scss ของเรา และบางสไตล์จากไฟล์ _typography.scss ของเรา ซึ่งทั้งคู่อยู่ในโฟลเดอร์ src/styles/base/ ของเรา เราจะไม่สามารถรู้สิ่งนี้ได้หากเราไม่ใส่ซอร์สแมป มันจะแสดงให้เราเห็นว่าสไตล์นั้นมาจาก webpack-bundle.css ที่รวมมาของเรา

 /* webpack.dev.js */module.exports = ผสาน (ทั่วไป, {
  โหมด: "การพัฒนา"
  devtool: "อินไลน์ซอร์สแผนที่",});
 /* webpack.prod.js */module.exports = ผสาน (ทั่วไป, {
  โหมด: "การผลิต"
  devtool: "แผนที่ต้นทาง",});

อ่านเพิ่มเติมเกี่ยวกับซอร์สแมปประเภทต่างๆ เพื่อค้นหาสิ่งที่ดีที่สุดสำหรับโปรเจ็กต์ของคุณ อ่านเพิ่มเติมเกี่ยวกับตัวเลือก devtool ในเอกสาร webpack

การสร้าง Favicon

นี่เป็นปลั๊กอินที่ยอดเยี่ยมที่สร้างทุกไอคอนที่คุณต้องการโดยอิงจากแหล่งรูปภาพแหล่งเดียว ในโฟลเดอร์ src/images/ ของฉัน ฉันมี tris-package.svg ที่ฉันป้อนลงใน favicons-webpack-plugin

มันจะสร้างไอคอนสำหรับ apple, android, chrome, firefox, twitter, windows ตามที่คุณต้องการ มันจะสร้างแต่ละไอคอนในขนาดที่แตกต่างกันทั้งหมดและนำเข้าโดยตรงไปยังส่วนหัวของเว็บไซต์ของคุณ Twitter และ windows ถูกตั้งค่าเป็น false แต่เป็นค่าเริ่มต้น ดังนั้นฉันจึงเปลี่ยนให้เป็นจริงเพียงเพื่อให้ครอบคลุมฐานทั้งหมดในกรณีนี้

หมายเหตุ: สิ่งนี้จะเพิ่มเวลาในการสร้างอย่างมาก ซึ่งเป็นเรื่องที่เข้าใจได้เมื่อพิจารณาว่ามันทำงานได้มากเพียงใดภายใต้ประทุนและประหยัดเวลาได้มากเพียงใดในระยะยาว อย่าแปลกใจถ้า npm run build ของคุณใช้เวลานานกว่าปกติ 20 วินาที

 /* webpack.prod.js */const FaviconsWebpackPlugin = need("favicons-webpack-plugin");module.exports = ผสาน (ทั่วไป, {
  โหมด: "การผลิต"
  ปลั๊กอิน: [ใหม่ FaviconsWebpackPlugin ({ โลโก้: "./src/images/favicon.svg", ไอคอน: {twitter: true,windows: true, },}),
  -

ออฟไลน์ก่อนและแคช

ที่นี่เราใช้ปลั๊กอินออฟไลน์เพื่อแคชเนื้อหาทั้งหมดของเราในการโหลดหน้าเว็บ

ปลั๊กอินนี้มีจุดมุ่งหมายเพื่อมอบประสบการณ์ออฟไลน์สำหรับโปรเจ็กต์ webpack โดยจะใช้ ServiceWorker และ AppCache เป็นทางเลือกภายใต้ประทุน เราเพียงรวมปลั๊กอินนี้ไว้ใน webpack.prod.js และรันไทม์ที่แนบมาในสคริปต์ไคลเอนต์ของเรา (src/index.js) และโปรเจ็กต์ของเราจะพร้อมใช้งานแบบออฟไลน์โดยการแคชสินทรัพย์เอาต์พุต webpack ทั้งหมด (หรือบางส่วน)

หมายเหตุ: หากคุณ npm run build และอัปโหลดการเปลี่ยนแปลงไปยังเซิร์ฟเวอร์ของคุณ (หรือวิธีใดก็ตามที่คุณอัปเดตเว็บไซต์อยู่เสมอ) เว็บไซต์ของคุณจะต้องถูกปิดและเปิดใหม่อีกครั้งก่อนที่คุณจะเห็นการเปลี่ยนแปลง คุณไม่สามารถเปิดและรีเฟรชต่อไปได้ คุณต้องปิดแท็บแล้วเปิดใหม่อีกครั้งเพื่อให้แคชหยุดทำงาน

 /* webpack.prod.js */const OfflinePlugin = need("offline-plugin");module.exports = merge(common, {
  โหมด: "การผลิต"
  ปลั๊กอิน: [ปลั๊กอินออฟไลน์ใหม่()],});

โปรเกรสซีฟเว็บแอป (PWA)

Progressive Web Application (PWA) คือเว็บแอปพลิเคชันที่โหลดได้เหมือนกับหน้าเว็บหรือเว็บไซต์ปกติ แต่สามารถนำเสนอฟังก์ชันการใช้งานของผู้ใช้ เช่น การทำงานแบบออฟไลน์ การแจ้งเตือนแบบพุช และการเข้าถึงฮาร์ดแวร์ของอุปกรณ์ ซึ่งแต่เดิมมีให้ใช้งานเฉพาะกับแอปพลิเคชันที่มาพร้อมเครื่องเท่านั้น PWA ผสมผสานความยืดหยุ่นของเว็บเข้ากับประสบการณ์การใช้งานแอปพลิเคชันแบบเนทีฟ

ขั้นตอนสุดท้ายในการทำให้ต้นแบบนี้เป็น PWA คือการเพิ่ม Web App Manifest ที่บังคับไปยังรูทของโปรเจ็กต์ของคุณและกำหนดค่าอย่างเหมาะสม!

ก๊อตชา

Webpack ประสบปัญหาเมื่อพยายามรวมไลบรารีขนาดใหญ่เช่น jQuery คุณจะพบกับข้อผิดพลาดของคอนโซลเช่น $ is not defined หรือ jQuery is not defined เพื่อแก้ปัญหานี้ เราปล่อยให้ Webpack ถือว่ามันเป็นภายนอก จากนั้นเราจะกำหนดตัวแปรและรวม jQuery ผ่านทาง CDN คนส่วนใหญ่มี jQuery แคชอยู่ในเบราว์เซอร์ของตนโดยไม่คำนึงถึงว่านี่จะไม่เป็นปัญหาในแง่ของประสิทธิภาพ ฉันได้เพิ่ม externals: config ตามค่าเริ่มต้น แต่คุณจะต้องเพิ่ม jQuery cdn ด้วยตัวเองหากคุณวางแผนที่จะใช้

อ่านเพิ่มเติมเกี่ยวกับภายนอกในเอกสาร Webpack

 /* webpack.common.js */ปลั๊กอิน: [],ภายนอก: {
  $: 'jquery',
  เจคิวรี่: 'jQuery',
  'window.$': 'jquery',}
 /* src/index.html */<หัว>
  <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script></head>

มีส่วนร่วม

ฉันพยายามอย่างเต็มที่ที่จะอธิบายสิ่งต่าง ๆ อย่างละเอียด แต่หากมีบางสิ่งที่สามารถอธิบายได้ชัดเจนยิ่งขึ้น โปรดอย่าลังเลที่จะส่งคำขอดึงข้อมูลพร้อมการแก้ไขที่แนะนำบางส่วน ขอบคุณ!

หวังว่านี่จะช่วยได้! ติดตามฉันบน Twitter หากคุณสนใจสิ่งนั้น -

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด