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

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

9
วิธีอนุญาตให้ webpack-dev-server อนุญาตจุดเข้าจาก react-router
ฉันกำลังสร้างแอปที่ใช้ webpack-dev-server ในการพัฒนาควบคู่ไปกับ react-router ดูเหมือนว่า webpack-dev-server ถูกสร้างขึ้นจากสมมติฐานที่ว่าคุณจะมีจุดเข้าสาธารณะในที่เดียว (เช่น "/") ในขณะที่ react-router อนุญาตให้มีจุดเข้าได้ไม่ จำกัด จำนวน ฉันต้องการประโยชน์ของ webpack-dev-server โดยเฉพาะอย่างยิ่งคุณสมบัติการรีโหลดใหม่ที่ยอดเยี่ยมสำหรับการทำงาน แต่ฉันยังต้องการโหลดเส้นทางที่ตั้งไว้ใน react-router เราจะนำมันไปใช้งานร่วมกันได้อย่างไร? คุณสามารถเรียกใช้เซิร์ฟเวอร์ด่วนที่ด้านหน้าของ webpack-dev-server เพื่ออนุญาตสิ่งนี้ได้หรือไม่?
18
ไม่ได้เปิดใช้การสนับสนุนสำหรับไวยากรณ์การทดลอง 'classProperties' ในขณะนี้
ในขณะที่ฉันกำลังตั้งค่า React ภายในโครงการ Django ฉันพบข้อผิดพลาดนี้ ModuleBuildError ในการสร้างโมดูลล้มเหลว (จาก ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: การสนับสนุนสำหรับคลาสคุณสมบัติของไวยากรณ์ทดลอง 'ยังไม่ได้เปิดใช้งาน (17: 9): 15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | …
3
HtmlWebpackPlugin ฉีดไฟล์พา ธ สัมพัทธ์ซึ่งแตกเมื่อโหลดเส้นทางเว็บไซต์ที่ไม่ใช่รูท
ฉันใช้ webpack และ HtmlWebpackPlugin เพื่อฉีด js และ css ที่รวมไว้ในไฟล์เทมเพลต html new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), และสร้างไฟล์ html ต่อไปนี้ <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> วิธีนี้ใช้งานได้ดีเมื่อไปที่รูทของแอปlocalhost:3000/แต่ล้มเหลวเมื่อฉันพยายามเยี่ยมชมแอปจาก URL อื่นเช่นlocalhost:3000/items/1เนื่องจากไฟล์ที่รวมไม่ได้ถูกแทรกด้วยพา ธ สัมบูรณ์ เมื่อโหลดไฟล์ html ไฟล์จะค้นหาไฟล์ js ภายใน/itemsไดเร็กทอรีที่ไม่มีอยู่จริงเนื่องจาก react-router …
5
จะเข้าถึง webpack-dev-server จากอุปกรณ์ในเครือข่ายท้องถิ่นได้อย่างไร?
มีการกำหนดค่าเซิร์ฟเวอร์ webpack dev (เป็นส่วนหนึ่งของ config ทั้งหมด): config.devServer = { contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), stats: { modules: false, cached: false, colors: true, chunk: false }, proxy: [{ path: /^\/api\/(.*)/, target: options.proxyApiTarget, rewrite: rewriteUrl('/$1'), changeOrigin: true }] }; function rewriteUrl(replacePath) { return function (req, opt) { // gets …
6
Webpack 4 - วิธีกำหนดค่าย่อเล็กสุด?
Webpack 4 มาพร้อมกับคำสั่งต่อไปนี้: webpack.optimize.UglifyJsPlugin ถูกลบออกแล้วโปรดใช้ config.optimization.minimize แทน พอใช้ แต่ฉันไม่พบข้อมูลใด ๆ เกี่ยวกับการกำหนดค่าอินสแตนซ์ UglifyJsPlugin ที่ทำงานภายใต้ประทุนตัวอย่างเช่นเพื่อเปลี่ยนไดเรกทอรีแคช สามารถทำได้หรือไม่?
20
React-Native: Module AppRegistry ไม่ใช่โมดูลที่เรียกได้ที่ลงทะเบียน
ฉันกำลังพยายามให้ES6 react-native-webpack-serverทำงานบนโปรแกรมจำลอง Android ความแตกต่างคือฉันได้อัปเกรดpackage.jsonและbuild.gradeใช้การตอบสนอง0.18.0และได้รับข้อผิดพลาดนี้เมื่อบูต เท่าที่ฉันทราบAppRegistryมีการนำเข้าอย่างถูกต้อง แม้ว่าฉันจะแสดงความคิดเห็นเกี่ยวกับรหัสข้อผิดพลาดนี้ก็ยังเกิดขึ้น สิ่งนี้ใช้ได้กับ iOS โดยไม่มีปัญหา ผมทำอะไรผิดหรือเปล่า? แก้ไข: หลังจากลองใช้หม้อไอน้ำอื่น ๆ ที่รองรับ 0.18.0 แล้วฉันยังคงพบปัญหาเดียวกัน
4
วิธีจัดเก็บไฟล์ Configuration และอ่านโดยใช้ React
ฉันเป็นคนใหม่ใน react.js ฉันได้ใช้ส่วนประกอบหนึ่งที่ฉันกำลังดึงข้อมูลจากเซิร์ฟเวอร์และใช้มันเช่น CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, ฉันต้องการจัดเก็บ Url ในไฟล์คอนฟิกูเรชันดังนั้นเมื่อฉันปรับใช้สิ่งนี้บนเซิร์ฟเวอร์การทดสอบหรือในการผลิตฉันต้องเปลี่ยน url บนไฟล์ config ที่ไม่ใช่ในไฟล์ js แต่ฉันไม่รู้วิธีใช้ไฟล์คอนฟิกูเรชันใน react.js ใครช่วยแนะนำฉันหน่อยได้ไหมว่าฉันจะบรรลุเป้าหมายนี้ได้อย่างไร
7
แสดง jQuery กับวัตถุ Window จริงด้วย Webpack
ฉันต้องการแสดงวัตถุ jQuery กับวัตถุหน้าต่างส่วนกลางที่สามารถเข้าถึงได้ภายในคอนโซลนักพัฒนาในเบราว์เซอร์ ตอนนี้ในการกำหนดค่า webpack ของฉันฉันมีบรรทัดต่อไปนี้: plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] บรรทัดเหล่านี้จะเพิ่มนิยาม jQuery ให้กับแต่ละไฟล์ในโมดูล webpack ของฉัน แต่เมื่อฉันสร้างโครงการและพยายามเข้าถึง jQuery ในคอนโซลนักพัฒนาซอฟต์แวร์เช่นนี้: window.$; window.jQuery; มันบอกว่าคุณสมบัติเหล่านี้ไม่ได้กำหนด ... มีวิธีแก้ไขปัญหานี้หรือไม่?
6
นำเข้ารูปภาพจากไดเร็กทอรีแบบไดนามิกโดยใช้ webpack
นี่คือเวิร์กโฟลว์ปัจจุบันของฉันสำหรับการนำเข้ารูปภาพและไอคอนใน webpack ผ่าน ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> สิ่งนี้จะยุ่งอย่างรวดเร็ว นี่คือสิ่งที่ฉันต้องการ: import * from './images' <img src={doggy} /> <img src={turtle} /> ฉันรู้สึกว่าต้องมีวิธีการนำเข้าไฟล์ทั้งหมดแบบไดนามิกจากไดเร็กทอรีเฉพาะเป็นนามสกุลของชื่อแล้วใช้ไฟล์เหล่านั้นตามต้องการ ใครเคยเห็นสิ่งนี้หรือมีความคิดใด ๆ เกี่ยวกับวิธีที่ดีที่สุดที่จะไปเกี่ยวกับมัน? อัพเดท: เมื่อใช้คำตอบที่เลือกฉันสามารถทำได้: function importAll(r) { let images = {}; r.keys().map((item, index) …
4
สัญลักษณ์วงเล็บวัตถุ Javascript ({การนำทาง} =) ทางด้านซ้ายของการกำหนด
ฉันไม่เคยเห็นไวยากรณ์นี้มาก่อนและฉันสงสัยว่ามันเกี่ยวกับอะไร var { Navigation } = require('react-router'); วงเล็บด้านซ้ายแสดงข้อผิดพลาดทางไวยากรณ์: โทเค็นที่ไม่คาดคิด { ฉันไม่แน่ใจว่าส่วนใดของการกำหนดค่า webpack กำลังเปลี่ยนแปลงหรือวัตถุประสงค์ของไวยากรณ์คืออะไร มันเป็นความสามัคคี? มีใครสามารถสอนฉันได้บ้าง?
7
webpack ไม่พบโมดูลหากไฟล์ชื่อ jsx
ในขณะที่ฉันเขียน webpack.config.js เช่นนี้ module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; และในindex.jsxฉันนำเข้าreactโมดูลApp import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = …
19
ปฏิเสธที่จะโหลดแบบอักษร 'data: font / woff ... ' ซึ่งละเมิดคำสั่งนโยบายความปลอดภัยของเนื้อหาต่อไปนี้:“ default-src 'self'” โปรดทราบว่า 'font-src'
เว็บแอปตอบสนองของฉันให้ข้อผิดพลาดนี้ในคอนโซลเบราว์เซอร์ Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. นอกจากนี้: Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note …
7
“ คุณอาจต้องใช้ตัวโหลดที่เหมาะสมเพื่อจัดการไฟล์ประเภทนี้” ด้วย Webpack และ Babel
ฉันพยายามใช้ Webpack กับ Babel เพื่อรวบรวมเนื้อหา ES6 แต่ฉันได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' นี่คือลักษณะการกำหนดค่า Webpack ของฉัน: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './index', output: { …
12
จะใช้ Google Fonts ใน React.js ได้อย่างไร?
ผมได้สร้างเว็บไซต์ที่มีReact.jsและwebpack ฉันต้องการใช้แบบอักษรของ Googleในหน้าเว็บดังนั้นฉันจึงใส่ลิงค์ในส่วนนี้ Google Fonts <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> และตั้งค่า CSS body{ font-family: 'Bungee Inline', cursive; } อย่างไรก็ตามมันไม่ได้ผล ฉันจะแก้ปัญหานี้ได้อย่างไร?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.