สิ่งตีพิมพ์ในหัวข้อ 'webpack'
ถึงเวลาที่คุณจะต้องเรียนรู้ Webpack แล้ว
ฉันใช้ Webpack
ฉันเคยใช้มันใน create-react-app (CRA) ผ่าน react-scripts และในโปรเจ็กต์อื่นๆ ที่มีการตั้งค่าการกำหนดค่าแบบกำหนดเองก่อนที่ฉันจะลงมือใช้งาน แต่ฉันไม่รู้จริงๆว่ามันทำงานอย่างไร ฉันดูการกำหนดค่า ฉันเข้าใจแนวคิดเบื้องหลัง แต่ฉันไม่เคยเขียนการกำหนดค่า Webpack หรือพยายามตั้งค่าของตัวเองเลย นั่นคือสิ่งที่บทความนี้จะเกี่ยวกับ เปลี่ยนจากการไม่มีการกำหนดค่าไปสู่การตั้งค่าการทำงานพื้นฐานที่จะรวม HTML , CSS และ Javascript..
วันนี้ไดอารี่ของฉันเป็นภาษาอังกฤษ (27 พฤษภาคม 2559)
นี่คือการฝึกความสามารถด้านภาษาอังกฤษของฉัน
ฉันรู้สึกว่านวัตกรรมของเทคโนโลยีเว็บรวดเร็วมาก ฉันกำลังสร้างเว็บแอปพลิเคชันสำหรับบริษัทของฉันตอนนี้ แอปพลิเคชั่นนี้เป็นระบบจัดการห้องเข้าและออก แต่ไม่ใช่แค่จัดการการเข้าและออกเท่านั้น เช่น ป้ายห้องประชุมจะเปลี่ยนเป็น "จองแล้ว" เมื่อผู้ใช้สร้างแผนใน Google ปฏิทิน
ฉันกำลังลองใช้แพ็คเกจ npm ที่มีชื่อเสียง (เช่น React, Redux, karma, mocha, power-assert, webpack, babel, es6) แต่ฉันไม่รู้ว่านี่เป็นแนวทางปฏิบัติที่ดีที่สุด..
ES Check ยูทิลิตี้ JavaScript สุดเจ๋งที่จะช่วยบั้นท้ายของคุณ
JavaScript มีอยู่ทุกที่เมื่อพูดถึงการพัฒนาซอฟต์แวร์ สามารถใช้สำหรับสร้างแอป เว็บเพจ บนเซิร์ฟเวอร์ หรือในโรบ็อตตัวน้อย 🤖! เราจะแน่ใจได้อย่างไรว่า JavaScript ของคุณสามารถทำงานได้ทุกที่ที่คุณต้องการตามที่เราต้องการ
นั่นคือสิ่งที่ "ES Check" ทำ! เป็นยูทิลิตี้ที่เขียนขึ้นเพื่อให้แน่ใจว่าเวอร์ชันของ JavaScript ที่จะนำไปใช้จริงตรงกับเวอร์ชัน JavaScript ที่คาดหวังสำหรับการผลิต
ES Check ใช้เวลา 2 ขั้นตอนในการตั้งค่า!
การตั้งค่า ES Check สามารถทำได้โดยการติดตั้งและเพิ่มสคริปต์ 1 บรรทัด..
Webpack: ทีละสิ่ง
ทุกครั้งที่ฉันพยายามเรียนรู้เกี่ยวกับสคริปต์บิลด์ บันเดิลหรือ doohickeys จาวาสคริปต์อื่นๆ ฉันประสบปัญหาในการค้นหาบทช่วยสอนที่ไม่ต้องการให้ฉันตั้งค่า ทุกอย่าง
เมื่อคุณกำลังเรียนรู้ คุณไม่จำเป็นต้องตั้งค่าแอป React/Redux ด้วยการทดสอบ Sass และ Flow และ Jest บางครั้งคุณเพียงต้องการทำสิ่งหนึ่งสิ่งใดในแต่ละครั้ง
บทช่วยสอนนี้เกี่ยวกับ การตั้งค่าโครงการ Webpack และเราจะดำเนินการให้น้อยที่สุดเท่านั้น
Webpack เป็นตัวรวม Javascript, HTML, CSS, Sass, JSX หรือไฟล์อื่นๆ..
ส่วนหน้าแบบไมโครโดยใช้ Single-SPA และ Module Federation
มาสร้างแอปที่มีส่วนหน้าแบบไมโครด้วยกัน
ในบทความนี้ ผมจะอธิบายวิธีใช้งานแอปส่วนหน้าแบบไมโครด้วย single-spa และ module federation ใน Webpack
ตัวอย่างพื้นที่เก็บข้อมูล
นี่คือโค้ดเบสสุดท้ายบน GitHub:
manakuro/micro-frontends-single-spa-module-federation แอป Micro-frontends ที่ใช้สปาเดี่ยวและการรวมโมดูล - manakuro/micro-frontends-single-spa-module -สหพันธ์ github.com
สารบัญ
ส่วนหน้าแบบไมโคร S อินเกิลสปา การรวมโมดูลใน..
คำถามในหัวข้อ 'webpack'
ไม่พบโมดูล shelljs บนการรวม lib ใน typescript เชิงมุม 2
ฉันต้องการรวมไลบรารี่ของเชลล์ js เข้ากับ typescript เชิงมุม 2 ฉันได้รวมไฟล์ shelljs.d.ts ไว้ในไลบรารี node_modules/shelljs ของฉันแล้ว
package.json ของฉัน
"name": "myproj1",
"description": "myproj1: A project",
"typings": {
"shelljs":...
4080 มุมมอง
schedule
20.12.2023
รวมโมดูลที่มีการพึ่งพาเป็นจุดเริ่มต้นใน Webpack (Angular 2 Typescript)
ฉันได้กำหนดค่า Webpack ในโปรเจ็กต์ของฉันแล้ว และในฟิลด์จุดเริ่มต้น ฉันได้เพิ่มไฟล์โพลีฟิล ผู้จำหน่าย และแอปแล้ว แต่ฉันมีไฟล์อื่น 'myComponent.js' ซึ่งมีการอ้างอิงอยู่
webpack.common.js
entry:
{
'polyfills': './polyfills.ts',...
3507 มุมมอง
schedule
02.12.2023
ไม่สามารถส่งผ่านเส้นทาง src สัมพัทธ์แบบไดนามิกสำหรับ imgs ใน Vue.js + webpack
ปัญหาที่ฉันมีคือการใช้ vue.js กับ webpack
ฉันมีรายการที่ฉันต้องการเติมแบบไดนามิกใน vue.js
ฉันใช้ v-for เพื่อวนซ้ำแต่ละวัตถุและสร้างรายการ
หากต้องการผูกแท็ก img src กับจุดข้อมูล {{resource.img}} ดูเหมือนว่านี้: <img...
2487 มุมมอง
schedule
18.01.2024
วิธีที่เหมาะสมในการรับ Three.js ภายใน Webpack คืออะไรเพื่อให้ฉันสามารถใช้ OrbitControls ได้
ในการกำหนดค่า webpack ของฉัน:
resolve: {
alias: {
'three': path.resolve('node_modules', 'three/build/three.js'),
'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'),...
1543 มุมมอง
schedule
04.01.2024
การกำหนดค่าการตรวจสอบสิทธิ์สำหรับพร็อกซี webpack
ฉันมีบริการ .Net Web API ที่ทำงานโดยเปิดใช้งานการรับรองความถูกต้องของ windows ฉันมีแอปพลิเคชัน UI แยกต่างหากซึ่งมีการตั้งค่า webpack ฉันกำลังพยายามตั้งค่าพร็อกซี webpack เพื่อเข้าถึงบริการของฉัน นี่คือการกำหนดค่าปัจจุบันของฉัน
"proxy": {...
3094 มุมมอง
schedule
12.01.2024
จะใช้ Intern กับ TypeScript และ webpack ได้อย่างไร
เป็นไปได้ไหม? เมื่อฉันพยายามนำเข้า Intern เช่นนี้ในการทดสอบ:
import * as registerSuite from 'intern!object'
จากนั้นฉันเรียกใช้ webpack เพื่อแปลการทดสอบ *.ts ของฉัน ฉันได้รับข้อผิดพลาดต่อไปนี้:
TS2307: ไม่พบโมดูล 'intern! object'...
453 มุมมอง
schedule
21.11.2023
การส่งผ่านอาร์กิวเมนต์บรรทัดคำสั่งไปยัง webpack.config.js
ฉันมี webpack.config.js ที่เรียบง่าย
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
}
และฉันต้องการส่งค่าสำหรับ entry และ output ผ่านอาร์กิวเมนต์บรรทัดคำสั่ง เป็นไปได้ไหมและฉันจะทำอย่างไร?
36037 มุมมอง
schedule
11.12.2023
จะเพิ่มไฟล์ js ด้วย webpack ได้อย่างไร?
ฉันกำลังอ่านบทช่วยสอน webpack นี้:
https://webpack.github.io/docs/usage.html
มันบอกว่ารวมไฟล์ src และ node_modules เข้าด้วยกัน หากฉันต้องการเพิ่มไฟล์ .js อีกไฟล์หนึ่ง จะต้องทำอย่างไร นี่เป็นไฟล์ Thirdpartyjs...
42246 มุมมอง
schedule
04.01.2024
Rails 5.1 + Webpacker + React-เราเตอร์
ฉันกำลังพยายามใช้ทั้งสามสิ่งนี้ในโปรเจ็กต์ใหม่ ฉันต้องการจัดการการกำหนดเส้นทางโดยใช้ react-router
ด้วยการตั้งค่า 'นอกกรอบ' มันทำงานได้ดีเมื่อฉันเริ่มต้นเช่น localhost:3000/ จากนั้นคลิกเพื่อดูตัวอย่าง Link การกำหนดเส้นทางไปยังหน้า signup...
737 มุมมอง
schedule
25.11.2023
บันเดิล webpack ล้มเหลวในการรีโหลด?
ฉันคิดว่าปัญหาไม่ได้อยู่ที่การกำหนดค่าเราเตอร์แบบโต้ตอบ แต่ดัชนี.html ของฉันตรวจไม่พบสคริปต์ของฉัน นี่เป็นข้อผิดพลาดของฉัน:
ไม่สามารถโหลดทรัพยากร: เซิร์ฟเวอร์ตอบกลับด้วยสถานะ 404 (ไม่พบ)
นี่คือรหัสกำหนดค่า webpack ของฉัน:
const...
446 มุมมอง
schedule
29.12.2023
ปัญหา webpack เมื่อพยายามเรียกใช้สภาพแวดล้อมการพัฒนา
ก่อนที่คุณจะอ่านข้อความนี้ ขออภัยที่แยกโค้ดของฉันออกเป็นเอกสารแยกกัน มันใช้เวลานานเกินไปสำหรับโปรแกรมแก้ไข Stackoverflow
ฉันได้รับข้อผิดพลาดนี้เมื่อฉันรันสภาพแวดล้อมการพัฒนา:
พบไฟล์การกำหนดค่า แต่ไม่มีการกำหนดค่ารายการ
ใช้ --help...
43 มุมมอง
schedule
01.12.2023
Uncaught SyntaxError: การนำเข้าโทเค็นที่ไม่คาดคิด - Reactjs
แอปของฉันทำงานได้อย่างสมบูรณ์แบบก่อนที่ฉันจะติดตั้ง simple-react-bootstrap หลังจาก การติดตั้งตอนนี้แสดงหน้าว่างและในคอนโซลแสดงข้อผิดพลาด:
Uncaught SyntaxError: การนำเข้าโทเค็นที่ไม่คาดคิด
ฉันได้ตรวจสอบวิธีแก้ปัญหาเกือบทั้งหมดแล้วใน...
381 มุมมอง
schedule
24.12.2023
Vue Custom Element ไม่สามารถสร้างไฟล์ JS แบบสแตนด์อโลนใน Dist
ฉันทำตามคำแนะนำในการลงทะเบียนและใช้องค์ประกอบที่กำหนดเองที่นี่:
https://alligator.io/vuejs/custom-elements/
ฉันใช้เทมเพลต Webpack มาตรฐานสำหรับ Vue
เมื่อฉันวิ่ง
npm run build
ฉันคาดว่าจะได้รับไฟล์คอมโพเนนต์ของเว็บที่เรียกว่า...
1511 มุมมอง
schedule
10.12.2023
Angular 5 - โหลดโมดูล (ที่ไม่รู้จัก ณ เวลาคอมไพล์) แบบไดนามิก ณ รันไทม์
เป็นไปได้ไหมที่ Angular 5 จะโหลดโมดูล / ส่วนประกอบที่ไม่รู้จัก ณ เวลาคอมไพล์ แต่ระหว่างรันไทม์แบบไดนามิก
ฉันเดาว่านี่จะใช้ไม่ได้กับ webpack แต่อาจใช้ system.js ใช่ไหม
แก้ไข:...
3604 มุมมอง
schedule
19.12.2023
Webpack: จะรวมฝั่งไคลเอ็นต์และเซิร์ฟเวอร์เข้าไว้ในชุดสุดท้ายได้อย่างไร
ฉันมีอาการเวียนศีรษะจากการกำหนดค่าและกรณีการใช้งาน webpack มากมาย และเข้าสู่ภาวะชะงักงัน ในที่สุดฉันก็สร้างแอปของฉันแล้ว: react.js + express.js
ขณะนี้ฝั่งเซิร์ฟเวอร์เพียงประมวลผลข้อมูลแบบฟอร์มที่ส่งและใช้ nodemailer เพื่อส่งอีเมล...
1282 มุมมอง
schedule
17.01.2024
React Hot Loader v4.0.0 + เซิร์ฟเวอร์ Webpack 4 dev ไม่อัปเดตแอป
ดูเหมือนว่าการเชื่อมต่อ WebSocket จะถูกสร้างขึ้น แต่ไม่มีการรีเฟรชโมดูล
เอาต์พุตคอนโซล Chrome:
client?ecf9:80 [WDS] App updated. Recompiling...
client?ecf9:223 [WDS] App hot update...
2client?ecf9:80 [WDS] App updated. Recompiling......
799 มุมมอง
schedule
11.11.2023
ชุด Aurelia Webpack ไม่ทำงานกับ PhoneGap
ฉันกำลังมองหาวิธีที่จะทำให้แอป Aurelia/ESNext/Webpack ของฉันทำงานร่วมกับ PhoneGap (รุ่น Android) ไฟล์ที่รวมกลุ่มจะอยู่ในโฟลเดอร์ "www" เมื่อมองไปที่ผู้ตรวจสอบ ดูเหมือนว่าเซิร์ฟเวอร์ webpack...
491 มุมมอง
schedule
17.12.2023
Babel 7 + Inversify 4 + WebPack 4 - อักขระที่ไม่คาดคิด '@' บน @inject
ฉันมีโปรเจ็กต์ typescript Vue SPA ที่ฉันใช้ Inversify
ฉันใช้ awesome-typescript-loader เพื่อรวบรวมซอร์สโค้ด typescript ของฉัน ตอนนี้ฉันต้องการเปลี่ยนไปใช้ Babel แต่เมื่อฉันคอมไพล์แอปพลิเคชัน webpack ทำให้เกิดข้อผิดพลาดนี้:...
2080 มุมมอง
schedule
17.11.2023
การปรับใช้ฝักถั่วแบบยืดหยุ่น Express + Webpack
พยายามปรับใช้แอปพลิเคชันเซิร์ฟเวอร์ของฉันกับต้นถั่วยืดหยุ่น มีปัญหากับคำสั่ง webpack สิ่งนี้ได้รับการติดตั้งในเครื่องโดยอาศัยการพึ่งพาการพัฒนา คำสั่งในการรันแอปพลิเคชันคือ:
"build": "webpack --config webpack.config.js",
"start": "npm run build...
333 มุมมอง
schedule
04.01.2024
ใช้ babel-polyfill (และไม่ใช่ polyfill.io) ใน nuxt
ฉันกำลังสร้างไซต์แบบคงที่ด้วยเทมเพลต nuxt vuetify และถึงแม้ว่ามันจะยอดเยี่ยมและมีการกำหนดค่าและการตั้งค่ามากมายให้ฉันแล้ว แต่ฉันพบว่ามันยากมากที่จะทำให้ไซต์ของฉันทำงานได้อย่างราบรื่นบน Internet Explorer (11)
เนื่องจากจำเป็นต้องแปลงรหัส ES6...
2749 มุมมอง
schedule
15.11.2023
