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

/arbitrary/routeตอบสนองเราเตอร์ช่วยให้ตอบสนองปพลิเคชันที่จะจับ เพื่อให้มันใช้งานได้ฉันต้องการเซิร์ฟเวอร์ของฉันเพื่อส่งแอป React ในทุกเส้นทางที่ตรงกัน แต่เซิร์ฟเวอร์ dev ของ webpackไม่จัดการจุดสิ้นสุดตามอำเภอใจ มีวิธีแก้ปัญหาที่นี่โดยใช้เซิร์ฟเวอร์ด่วนเพิ่มเติม วิธีการอนุญาตสำหรับ webpack-dev-server เพื่ออนุญาตจุดเข้าใช้งานจาก react-router แต่ฉันไม่ต้องการไฟเซิร์ฟเวอร์ด่วนอื่นให้อนุญาตการจับคู่เส้นทาง ฉันแค่อยากบอก webpack dev server ให้ตรงกับ url และส่งแอปตอบกลับของฉันมาให้ฉัน กรุณา.

148 reactjs  ecmascript-6  webpack  react-router 

ฉันใช้webpackการจัดการreactjsโครงการ ฉันต้องการที่จะโหลดภาพใน JavaScript โดย file-loaderwebpack ด้านล่างนี้คือwebpack.config.js : const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, …

141 javascript  reactjs  webpack 

ผลลัพธ์ของข้อผิดพลาดของฉัน: วัตถุการกำหนดค่าไม่ถูกต้อง Webpack เริ่มต้นโดยใช้ออบเจ็กต์การกำหนดค่าที่ไม่ตรงกับสคีมา API - configuration.module มีคุณสมบัติที่ไม่รู้จัก 'loaders' คุณสมบัติเหล่านี้ถูกต้อง: object {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, UnknownContextCritical ?, UnknownContextRecursive?, UnknownContextRegExp ?, unknownContextRequest? ?, tightExportPresence?, tightThisContextOnImports? } -> ตัวเลือกที่มีผลต่อโมดูลปกติ ( NormalModuleFactory) webpack.config.js ของฉัน: var webpack = require('webpack'); var path = require('path'); var …

140 reactjs  webpack 

ผมเล่นไปรอบ ๆ ด้วยReactและES6ใช้และbabel webpackฉันต้องการสร้างคอมโพเนนต์หลาย ๆ ไฟล์ในไฟล์ที่แตกต่างกันนำเข้าในไฟล์เดียวและรวมเข้ากับไฟล์webpack สมมติว่าฉันมีส่วนประกอบบางอย่างดังนี้: my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } main-page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends …

139 reactjs  ecmascript-6  webpack 

ฉันใหม่เพื่อตอบสนองฉันต้องการรวม bootstrap ในแอพตอบโต้ของฉัน ฉันติดตั้ง bootstrap โดย npm install bootstrap --save ตอนนี้ต้องการโหลด bootstrap css และ js ในแอพ react ของฉัน ฉันใช้ webpack webpack.config.js var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: …

135 twitter-bootstrap  reactjs  webpack 

ฉันมีปัญหากับภาพของฉันในโครงการตอบสนองของฉัน อันที่จริงฉันคิดเสมอว่าพา ธ สัมพัทธ์ไปยังแอตทริบิวต์ src ถูกสร้างขึ้นบนสถาปัตยกรรมไฟล์ นี่คือสถาปัตยกรรมไฟล์ของฉัน: components file1.jsx file2.jsx file3.jsx container img js ... อย่างไรก็ตามฉันตระหนักว่าเส้นทางถูกสร้างขึ้นบน url ในองค์ประกอบหนึ่งของฉัน (ตัวอย่างเช่นใน file1.jsx) ฉันมีสิ่งนี้: localhost/details/2 <img src="../img/myImage.png" /> -> works localhost/details/2/id <img src="../img/myImage.png" /> -> doesn't work, images are not displayed เป็นไปได้อย่างไรที่จะแก้ปัญหานี้? ฉันต้องการให้ในรูปแบบของเส้นทางใด ๆ ที่จัดการโดย react-router ภาพทั้งหมดสามารถแสดงด้วยเส้นทางเดียวกัน

135 javascript  reactjs  webpack 

ฉันมีแอพง่ายๆเริ่มต้นโดยangular-cli. มันแสดงบางเพจที่สัมพันธ์กับ 3 เส้นทาง ฉันมีส่วนประกอบ 3 อย่าง ที่หนึ่งของการใช้งานนี้ผมหน้าlodashและเชิงมุม 2 HTTP โมดูลที่จะได้รับข้อมูลบางอย่าง (โดยใช้ RxJS Observables, mapและsubscribe) ฉันแสดงองค์ประกอบเหล่านี้โดยใช้ไฟล์*ngFor. แต่แม้ว่าแอปของฉันจะเรียบง่าย แต่ฉันก็ได้รับแพ็คเกจและแผนที่ขนาดใหญ่ (ในความคิดของฉัน) ฉันไม่ได้พูดถึงเวอร์ชัน gzip แต่เป็นขนาดก่อน gzipping คำถามนี้เป็นเพียงการสอบถามเกี่ยวกับคำแนะนำทั่วไป ผลการทดสอบบางส่วน: ng สร้าง แฮช: 8efac7d6208adb8641c1 เวลา: 10129ms chunk {0} main.bundle.js, main.bundle.map (main) 18.7 kB {3} [initial] [rendered] ก้อน {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (รูปแบบ) 155 kB {4} …

135 angular  webpack  angular-cli 

UPDATE: ธันวาคม 2561 (ดูคำตอบของ 'Aniket') ด้วย Angular CLI 6 คุณต้องใช้ตัวสร้างเนื่องจาก ng eject ถูกเลิกใช้และจะถูกลบออกในเร็ว ๆ นี้ใน 8.0 UPDATE: มิถุนายน 2018: Angular 6 ไม่รองรับ ng eject ** UPDATE: กุมภาพันธ์ 2017: ใช้ ng eject อัปเดต: พฤศจิกายน 2559: ตอนนี้ angular-cli ใช้เฉพาะ webpack เท่านั้น คุณต้องติดตั้งตามปกติด้วย npm install -g angular-cli "เราเปลี่ยนระบบการสร้างระหว่าง beta.10 และ beta.14 จาก SystemJS …

132 angular  webpack  angular-cli 

ฉันเริ่มใช้ webpack2 (เพื่อให้แม่นยำv2.3.2) และหลังจากสร้างการกำหนดค่าของฉันใหม่ฉันยังคงพบปัญหาที่ดูเหมือนจะแก้ไม่ได้ (ขออภัยล่วงหน้าสำหรับการถ่ายโอนข้อมูลที่น่าเกลียด): ERROR in ./src/main.js Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' Parsed request is a module using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a …

131 npm  webpack  commonjs  webpack-2  package.json 

ฉันเพิ่งเริ่มใช้ webpack และฉันกำลังแปลงเว็บแอปพลิเคชันที่มีอยู่เพื่อใช้งาน ฉันใช้ webpack เพื่อรวมกลุ่มและย่อขนาด JS ของฉันซึ่งดีมากเมื่อนำไปใช้งานอย่างไรก็ตามสิ่งนี้ทำให้การดีบักในขณะพัฒนาเป็นเรื่องยากมาก โดยปกติฉันจะใช้ดีบักเกอร์ในตัวของ Chrome เพื่อแก้ไขปัญหา JS (หรือ Firebug บน firefox) อย่างไรก็ตามด้วย Webpack ทุกอย่างถูกยัดไว้ในไฟล์เดียวและมันกลายเป็นเรื่องยากที่จะแก้จุดบกพร่องโดยใช้กลไกนั้น มีวิธีเปิดและปิดการรวมกลุ่มอย่างรวดเร็วหรือไม่? หรือเปิดและปิดการลดขนาด? ฉันได้ตรวจดูว่ามีการกำหนดค่าตัวโหลดสคริปต์หรือการตั้งค่าอื่น ๆ แต่ไม่ปรากฏขึ้น ฉันยังไม่มีเวลาแปลงทุกอย่างให้ทำหน้าที่เหมือนโมดูลและต้องใช้ ดังนั้นฉันจึงใช้รูปแบบ require ("script! ./ file.js") สำหรับการโหลดของฉัน

131 javascript  webpack 

สมมติว่าฉันมีคลาสเช่นนี้ (เขียนด้วย typescript) และฉันรวมกับ webpack ไว้ในbundle.jsไฟล์. export class EntryPoint { static run() { ... } } ใน index.html ของฉันฉันจะรวมบันเดิลไว้ แต่ฉันก็อยากจะเรียกว่าวิธีการคงที่ <script src="build/bundle.js"></script> <script> window.onload = function() { EntryPoint.run(); } </script> อย่างไรก็ตามEntryPointไม่ได้กำหนดไว้ในกรณีนี้ ฉันจะเรียกจาวาสคริปต์ที่รวมมาจากสคริปต์อื่นได้อย่างไร เพิ่ม : ไฟล์กำหนดค่าWebpack

130 javascript  html  typescript  webpack 

ฉันจะกำหนดค่า Angular และ VSCode เพื่อให้เบรกพอยต์ทำงานได้อย่างไร

127 angular  debugging  webpack  visual-studio-code 

ฉันกำลังเรียนรู้ React.js และฉันใช้ windows 8 OS ฉันได้ไปที่โฟลเดอร์รูทของฉัน 1.Created the package.json file by npm init 2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder 3. install webpack globally by typing npm install webpack -g 4. i am also having a webpack.config.js in my root …

125 npm  webpack 

เมื่อสร้างโครงการใหม่ด้วย CLI (v3.7.0) มีตัวเลือกให้เลือกระหว่างdart-sassหรือnode-sassคอมไพเลอร์ เหล่านี้จะเปรียบเทียบวิธีการแต่ละอื่น ๆ ที่จะเฉพาะเจาะจงมากขึ้นกว่าที่ประกาศไว้ในเอกสาร Vue ? เคล็ดลับเกี่ยวกับประสิทธิภาพของ Sass โปรดทราบว่าเมื่อใช้ Dart Sass การคอมไพล์แบบซิงโครนัสจะเร็วกว่าการคอมไพล์แบบอะซิงโครนัสเป็นสองเท่าโดยค่าเริ่มต้นเนื่องจากค่าใช้จ่ายของการเรียกกลับแบบอะซิงโครนัส เพื่อหลีกเลี่ยงค่าใช้จ่ายนี้คุณสามารถใช้แพ็คเกจ fibre เพื่อเรียกผู้นำเข้าแบบอะซิงโครนัสจากเส้นทางรหัสซิงโครนัส ในการเปิดใช้งานสิ่งนี้เพียงแค่ติดตั้งเส้นใยเป็นการพึ่งพาโครงการ: npm install -D fibers โปรดทราบด้วยว่าเป็นโมดูลดั้งเดิมอาจมีปัญหาความเข้ากันได้ที่แตกต่างกันไปตามระบบปฏิบัติการและสภาพแวดล้อมการสร้าง ในกรณีนี้โปรดเรียกใช้npm uninstall -D fibersเพื่อแก้ไขปัญหา ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS …

122 vue.js  webpack  sass  vue-cli  node-sass 

ฉันเป็นคนใหม่เล็กน้อยสำหรับโลกของนักวิ่งงานและบันเดิลเลอร์และในขณะที่ต้องผ่านสิ่งต่างๆเช่น Grunt, Gulp, Webpack, Browserify ฉันไม่รู้สึกว่ามีความแตกต่างระหว่างพวกเขามากนัก กล่าวอีกนัยหนึ่งฉันรู้สึกว่า Webpack สามารถทำทุกอย่างที่นักวิ่งงานทำ แต่ฉันยังมีตัวอย่างมากมายที่ใช้อึกและ webpack ร่วมกัน ฉันคิดไม่ออกว่าทำไม เมื่อยังใหม่กับเรื่องนี้ฉันอาจจะทำอะไรไปในทิศทางที่ไม่ถูกต้อง จะดีมากถ้าคุณสามารถชี้ให้เห็นว่าฉันขาดอะไรไป ยินดีต้อนรับลิงค์ที่เป็นประโยชน์ ขอบคุณล่วงหน้า.

117 gruntjs  gulp  bundler  browserify  webpack