คำถามติดแท็ก webpack

อะไรคือความแตกต่างระหว่างตัวโหลดและปลั๊กอินใน Webpack? เอกสารสำหรับปลั๊กอินเพียงแค่พูดว่า: ใช้ปลั๊กอินเพื่อเพิ่มฟังก์ชันที่เกี่ยวข้องกับบันเดิลใน webpack ฉันรู้ว่า babel ใช้ตัวโหลดสำหรับการแปลง jsx / es2015 แต่ดูเหมือนว่างานทั่วไปอื่น ๆ (เช่น copy-webpack-plugin เป็นต้น) ให้ใช้ปลั๊กอินแทน

104 javascript  reactjs  webpack 

ฉันสนใจแคชหน่วยความจำ Chrome เทียบกับดิสก์แคชหรือไม่ ฉันใช้ webpack ซึ่งเป็นปลั๊กอินส่วนใหญ่และสร้างไฟล์ทั้งหมดของฉันด้วย chunkhash หน่วยความจำแตกต่างจากดิสก์แคชอย่างไร เมื่อฉันโหลดหน้าของฉันใหม่ไฟล์บางไฟล์จะถูกโหลดจากแคชหน่วยความจำและบางไฟล์จากแคชของดิสก์ (bundle.js และ image.jpg จากแคชหน่วยความจำและ css จากดิสก์แคช) บางครั้งมันก็แตกต่างกัน เราควบคุมได้ไหมเลือกสิ่งที่โหลดจากที่ไหน แคชหน่วยความจำดูเหมือนจะเร็วกว่าแคชของดิสก์

103 google-chrome  caching  webpack 

ฉันลองเรียกใช้webpack --watchและหลังจากแก้ไขไฟล์ JS แล้วมันไม่ทริกเกอร์การคอมไพล์อัตโนมัติ ฉันได้ลองติดตั้งใหม่webpackโดยใช้npm uninstallแต่ก็ยังใช้ไม่ได้ ความคิดใด ๆ ?

103 javascript  webpack  fsevents 

ฉันมีแอปตอบกลับ helloworld ง่ายๆที่สร้างขึ้นจากหลักสูตรออนไลน์ แต่ฉันได้รับข้อผิดพลาดนี้: วัตถุการกำหนดค่าไม่ถูกต้อง Webpack เริ่มต้นโดยใช้ออบเจ็กต์การกำหนดค่าที่ไม่ตรงกับสคีมา API - การกำหนดค่ามีคุณสมบัติที่ไม่รู้จัก 'postcss' คุณสมบัติเหล่านี้ถูกต้อง: object {amd ?, bail ?, cache ?, context ?, dependencies ?, devServer ?, devtool ?, entry, externals ?, loader ?, module ?, name ?, node ?, output ?, performance? , plugins?, profile ?, recordsInputPath ?, recordsO utputPath ?, …

102 reactjs  typescript  webpack 

ฉันมีโปรเจ็กต์ที่เขียนด้วย ES6 โดยมี webpack เป็นบันเดิลเลอร์ การถ่ายโอนข้อมูลส่วนใหญ่ทำงานได้ดี แต่เมื่อฉันพยายามรวมมัณฑนากรไว้ที่ใดก็ได้ฉันได้รับข้อผิดพลาดนี้: Decorators are not supported yet in 6.x pending proposal update. ฉันได้ตรวจสอบตัวติดตามปัญหาของ babel แล้วและไม่พบสิ่งใดในนั้นดังนั้นฉันจึงคิดว่าฉันใช้ผิด การกำหนดค่า webpack ของฉัน (บิตที่เกี่ยวข้อง): loaders: [ { loader: 'babel', exclude: /node_modules/, include: path.join(__dirname, 'src'), test: /\.jsx?$/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0', 'react'] } } ] ฉันไม่มีปัญหากับสิ่งอื่นใดฟังก์ชันลูกศรการทำลายทุกอย่างทำงานได้ดีนี่เป็นสิ่งเดียวที่ใช้ไม่ได้ ฉันรู้ว่าฉันสามารถปรับลดรุ่นเป็น babel …

101 javascript  webpack  ecmascript-6  babeljs  decorator 

ฉันกำลังทำงานกับ React webapp โดยใช้ webpack ควบคู่ไปกับบทช่วยสอนนี้ บังเอิญฉันเพิ่มโฟลเดอร์ node_modules ไปยังคอมไพล์ของฉัน git rm -f node_modules/*จากนั้นผมก็หยิบมันออกมาอีกครั้งโดยใช้ ตอนนี้เมื่อฉันลองเริ่มเซิร์ฟเวอร์ webpack ฉันได้รับข้อผิดพลาดต่อไปนี้: > webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors sh: webpack-dev-server: command not found npm ERR! Darwin 14.4.0 npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve" npm ERR! node v0.12.4 npm ERR! npm v2.10.1 npm …

101 node.js  npm  webpack 

ฉันกำลังพยายามนำเข้าส่วนประกอบจาก react-materialize เป็น - import {Navbar, NavItem} from 'react-materialize'; แต่เมื่อ webpack กำลังรวบรวมของฉัน.tsxมันแสดงข้อผิดพลาดสำหรับข้างต้นเป็น - ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. ความละเอียดใด ๆ สำหรับสิ่งนี้ฉันไม่แน่ใจว่าจะแก้ไขคำสั่งการนำเข้านี้อย่างไรให้ใช้งานได้ts-loaderและ webpack index.jsของการตอบสนอง-เป็นตัวเป็นตนลักษณะชอบนี้ แต่วิธีแก้ปัญหานี้สำหรับการนำเข้าโมดูลในไฟล์ของฉันเอง .. https://github.com/react-materialize/react-materialize/blob/master/src/index.js

99 reactjs  webpack  webpack-2 

ฉันเริ่มทำงานร่วมกับwebpackกับnode/expressสภาพแวดล้อมการพัฒนาแอพลิเคชันด้านเซิร์ฟเวอร์แสดงผลด้วยReactJS react-routerฉันสับสนมากเกี่ยวกับบทบาทของแต่ละแพ็คเกจ webpack สำหรับสภาพแวดล้อม dev และ prod (รันไทม์) นี่คือบทสรุปของความเข้าใจของฉัน: webpack: เป็นแพ็กเกจซึ่งเป็นเครื่องมือในการรวมส่วนต่างๆของเว็บแอปพลิเคชันเข้าด้วยกันแล้วรวมเป็นไฟล์. js ไฟล์เดียว (ปกติbundle.js) จากนั้นไฟล์ผลลัพธ์จะถูกให้บริการในสภาพแวดล้อม prod ที่จะโหลดโดยแอปพลิเคชันและมีส่วนประกอบที่จำเป็นทั้งหมดเพื่อรันโค้ด คุณสมบัติต่างๆ ได้แก่ การย่อขนาดโค้ดการย่อขนาดและอื่น ๆ webpack-dev-server: เป็นแพ็คเกจที่มีเซิร์ฟเวอร์ในการประมวลผลไฟล์เว็บไซต์ นอกจากนี้ยังสร้างไฟล์. js ( bundle.js) ไฟล์เดียวจากคอมโพเนนต์ไคลเอ็นต์ แต่ทำหน้าที่ในหน่วยความจำ นอกจากนี้ยังมีตัวเลือก ( -hot) เพื่อตรวจสอบไฟล์สิ่งปลูกสร้างทั้งหมดและสร้างบันเดิลใหม่ในหน่วยความจำในกรณีที่มีการเปลี่ยนแปลงรหัส เซิร์ฟเวอร์ที่มีหน้าที่โดยตรงในเบราว์เซอร์ (เช่น: http:/localhost:8080/webpack-dev-server/whatever) การรวมกันของการโหลดหน่วยความจำการประมวลผลแบบร้อนและการให้บริการของเบราว์เซอร์ช่วยให้ผู้ใช้สามารถอัปเดตแอปพลิเคชันบนเบราว์เซอร์เมื่อโค้ดเปลี่ยนแปลงเหมาะสำหรับสภาพแวดล้อมการพัฒนา หากฉันมีข้อสงสัยเกี่ยวกับข้อความข้างต้นฉันไม่แน่ใจเกี่ยวกับเนื้อหาด้านล่างนี้จริงๆดังนั้นโปรดแนะนำฉันหากจำเป็น ปัญหาที่พบบ่อยเมื่อใช้webpack-dev-serverกับnode/expressเป็นสิ่งที่เป็นเซิร์ฟเวอร์ที่เป็นอยู่webpack-dev-server node/expressทำให้สภาพแวดล้อมนี้ยุ่งยากในการรันทั้งไคลเอนต์และโหนด / รหัสด่วน (API เป็นต้น) หมายเหตุ: นี่คือสิ่งที่ฉันเผชิญ แต่จะดีมากที่จะเข้าใจว่าเหตุใดจึงเกิดขึ้นในรายละเอียดเพิ่มเติม ... webpack-dev-middleware: นี่คือมิดเดิลแวร์ที่มีฟังก์ชั่นเดียวกันของwebpack-dev-server(การรวมหน่วยความจำ, …

97 javascript  node.js  webpack  webpack-dev-server  webpack-dev-middleware 

การวิจัยก่อนหน้านี้: ตามที่ wiki ของ webpack กล่าวไว้คุณสามารถใช้เครื่องมือวิเคราะห์เพื่อเพิ่มประสิทธิภาพการสร้าง: จาก: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats คำแนะนำจากการสร้างสถิติ มีเครื่องมือวิเคราะห์ที่แสดงภาพบิลด์ของคุณและยังให้คำแนะนำบางอย่างเกี่ยวกับขนาดการสร้างและประสิทธิภาพการสร้างที่สามารถปรับให้เหมาะสมได้ คุณสามารถสร้างไฟล์ JSON ที่ต้องการได้โดยเรียกใช้ webpack --profile --json> stats.json ฉันสร้างไฟล์สถิติ ( มีให้ที่นี่ ) อัปโหลดไปยังเครื่องมือวิเคราะห์ของ webpack และภายใต้แท็บคำแนะนำฉันบอกให้ใช้ prefetchPlugin: จาก: http://webpack.github.io/analyse/#hints โมดูลยาวสร้างโซ่ ใช้การดึงข้อมูลล่วงหน้าเพื่อเพิ่มประสิทธิภาพการสร้าง prefetch โมดูลจากตรงกลางของห่วงโซ่ ฉันขุดเว็บจากภายนอกเพื่อค้นหาเอกสารที่มีอยู่ใน prefechPlugin คือ: จาก: https://webpack.js.org/plugins/prefetch-plugin/ PrefetchPlugin new webpack.PrefetchPlugin([context], request) คำขอสำหรับโมดูลปกติซึ่งได้รับการแก้ไขและสร้างขึ้นก่อนที่ความต้องการจะเกิดขึ้น สิ่งนี้สามารถเพิ่มประสิทธิภาพได้ พยายามที่จะสร้างโปรไฟล์ก่อนเพื่อตรวจสอบจุด prefetching ฉลาด คำถามของฉัน: วิธีใช้ prefetchPlugin อย่างถูกต้อง? ขั้นตอนการทำงานที่เหมาะสมที่จะใช้กับเครื่องมือวิเคราะห์คืออะไร …

96 optimization  webpack 

ฉันมีปัญหาที่ซอร์สแมปที่สร้างโดย Webpack โดยใช้การinline-source-mapตั้งค่าการกำหนดค่าถูกปิดทีละบรรทัดเมื่อฉันใช้ดีบักเกอร์ Chrome devtools Webpack ได้รับการตั้งค่าภายในแอปพลิเคชัน Ruby on Rails เพื่อสร้างไฟล์ JavaScript ที่ต่อกันและไม่รวมกันซึ่งประกอบด้วยโมดูลสองสามโมดูล โมดูลเหล่านั้นส่วนใหญ่เป็นส่วนประกอบของ ReactJS และถูกแยกวิเคราะห์โดยตัวjsxโหลด จากนั้นเอาต์พุตจาก Webpack จะรวมอยู่ในapplication.jsไฟล์พร้อมกับไลบรารี JavaScript อื่น ๆ ที่สร้างโดยอัญมณี ตอนใช้eval-source-mapก็ไม่มีปัญหา บางอย่างเกี่ยวกับการใช้inline-source-mapสาเหตุที่ทำให้หมายเลขบรรทัดถูกโยนออกไปทีละรายการ การตรวจสอบ JavaScript ที่ไม่ใช่คอมโพเนนต์ React ยังคงมีปัญหานี้อยู่ดังนั้นฉันไม่คิดว่ามันเกี่ยวข้องกับการใช้ jsx

96 javascript  ruby-on-rails  google-chrome  webpack  source-maps 

ฉันเพิ่งสร้างแบรนด์ใหม่ เชิงมุม cliโปรเจ็กต์ และรันnpm install bootstrap@4.0.0-beta jquery popper.js --save และเปลี่ยนส่วนที่เกี่ยวข้องของ . angular-cli.jsonดังต่อไปนี้ "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], อย่างไรก็ตามได้รับข้อผิดพลาดด้านล่าง 10:2287 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at Object.2 (scripts.bundle.js:66) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at …

96 twitter-bootstrap  angular  webpack  popper.js 

ฉันมีไฟล์จาวาสคริปต์จำนวนมากที่แบ่งออกเป็น 4 ไดเรกทอรีย่อยในแอปของฉัน ด้วยความฮึดฮัดฉันคว้าทั้งหมดและรวบรวมเป็นไฟล์เดียว ไฟล์เหล่านี้ไม่มีฟังก์ชัน module.exports ฉันต้องการใช้ webpack และแบ่งออกเป็น 4 ส่วน ฉันไม่ต้องการเข้าไปด้วยตนเองและต้องการไฟล์ทั้งหมดของฉัน ฉันต้องการสร้างปลั๊กอินที่ในการคอมไพล์จะเดินไปตามแผนผังไดเร็กทอรีจากนั้นคว้าชื่อไฟล์และพา ธ . js ทั้งหมดจากนั้นต้องการไฟล์ทั้งหมดในไดเร็กทอรีย่อยและเพิ่มลงในเอาต์พุต ฉันต้องการให้ไฟล์ทั้งหมดในแต่ละไดเร็กทอรีรวบรวมเป็นโมดูลที่ฉันต้องการจากไฟล์จุดเริ่มต้นของฉันหรือรวมไว้ในเนื้อหาที่http://webpack.github.io/docs/plugins.htmlกล่าวถึง เมื่อเพิ่มไฟล์ใหม่ฉันแค่ต้องการวางลงในไดเร็กทอรีที่ถูกต้องและรู้ว่าจะรวมอยู่ด้วย มีวิธีดำเนินการกับ webpack หรือปลั๊กอินที่มีคนเขียนไว้ให้ทำสิ่งนี้หรือไม่?

96 javascript  build  webpack 

เช่น @import url("~./foobar"); เห็นที่นี่ไม่แน่ใจว่าเป็นสิ่งเฉพาะของแพ็คเกจหรือว่าเป็นไวยากรณ์ CSS จริง

96 css  webpack  webpack-style-loader 

ฉันยังใหม่กับ webpack มากฉันพบว่าในรุ่นการผลิตเราสามารถลดขนาดของโค้ดโดยรวมได้ ปัจจุบัน webpack สร้างไฟล์ประมาณ 8MB และ main.js ประมาณ 5MB จะลดขนาดโค้ดในการผลิตได้อย่างไร? ฉันพบไฟล์การกำหนดค่า webpack ตัวอย่างจากอินเทอร์เน็ตและฉันกำหนดค่าสำหรับแอปพลิเคชันของฉันและฉันเรียกใช้npm run buildและเริ่มสร้างและสร้างไฟล์บางไฟล์ใน./dist/ไดเรกทอรี ไฟล์เหล่านี้ยังคงมีน้ำหนักมาก (เหมือนกับเวอร์ชันระหว่างการพัฒนา) จะใช้ไฟล์เหล่านี้อย่างไร? ขณะนี้ฉันใช้ webpack-dev-server เพื่อเรียกใช้แอปพลิเคชัน package.json ไฟล์ { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", …

95 node.js  reactjs  npm  webpack  webpack-dev-server 

ฉันมีบางอย่างสำหรับการพัฒนา - เช่นล้อเลียนซึ่งฉันไม่ต้องการขยายไฟล์บิวด์แบบกระจายของฉันด้วย ใน RequireJS คุณสามารถส่งการกำหนดค่าในไฟล์ปลั๊กอินและต้องการสิ่งต่างๆตามเงื่อนไขนั้น สำหรับ webpack ดูเหมือนจะไม่มีวิธีการทำเช่นนี้ ประการแรกในการสร้างการกำหนดค่ารันไทม์สำหรับสภาพแวดล้อมฉันได้ใช้help.aliasเพื่อทำการกำหนดค่าใหม่ขึ้นอยู่กับสภาพแวดล้อมเช่น: // All settings. var all = { fish: 'salmon' }; // `envsettings` is an alias resolved at build time. module.exports = Object.assign(all, require('envsettings')); จากนั้นเมื่อสร้างการกำหนดค่า webpack ฉันสามารถกำหนดได้แบบไดนามิกว่าไฟล์ใดenvsettingsชี้ไปที่ (เช่นwebpackConfig.resolve.alias.envsettings = './' + env) อย่างไรก็ตามฉันต้องการทำสิ่งต่อไปนี้: if (settings.mock) { // Short-circuit ajax calls. // …

95 javascript  build  conditional  require  webpack