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

ฉันยังใหม่กับโลกทั้งnodejs / reactjsดังนั้นขอโทษถ้าคำถามของฉันดูเหมือนโง่ ดังนั้นฉันเล่นรอบกับreactabular.js เมื่อใดก็ตามที่ฉันทำnpm startมันจะทำงานต่อlocalhost:8080ไป ฉันจะเปลี่ยนให้ทำงาน0.0.0.0:8080เพื่อให้เข้าถึงได้แบบสาธารณะได้อย่างไร ฉันพยายามอ่านซอร์สโค้ดใน repo ด้านบน แต่ไม่พบไฟล์ที่ใช้การตั้งค่านี้ นอกจากนี้ในการเพิ่มไปยัง - ฉันจะทำให้มันทำงานบนพอร์ตได้80อย่างไรถ้าเป็นไปได้?

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

ฉันใช้เป็นสภาพแวดล้อม Cloud9.io อูบุนตู VM Online IDE และฉันได้ลดลงโดยการแก้ไขปัญหาข้อผิดพลาดนี้เพียงแค่เรียกใช้แอปกับเซิร์ฟเวอร์ Webpack dev ฉันเปิดตัวด้วย: webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT $ IP เป็นตัวแปรที่มีที่อยู่โฮสต์ $ PORT มีหมายเลขพอร์ต ฉันได้รับคำสั่งให้ใช้ vars เหล่านี้เมื่อปรับใช้แอพใน Cloud 9 เนื่องจากมีข้อมูล IP และ PORT เริ่มต้น เซิร์ฟเวอร์บูทและคอมไพล์รหัสไม่มีปัญหาไม่ใช่แสดงไฟล์ดัชนีให้ฉันเลย หน้าจอว่างเปล่าที่มีข้อความ "Invalid Host header" เป็นข้อความ นี่คือคำขอ: GET / HTTP/1.1 Host: store-client-nestroia1.c9users.io Connection: keep-alive Pragma: no-cache …

176 reactjs  webpack-dev-server  cloud9-ide  cloud9 

ในขณะที่ฉันเขียน 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 = …

109 reactjs  webpack  webpack-dev-server 

ฉันเริ่มทำงานร่วมกับ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 

ฉันยังใหม่กับ 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 

/publicฉันเท่านั้นที่สามารถดูแอปที่เกิดขึ้นจริงภายใต้ การกำหนดค่าwebpack.config.jsอยู่ด้านล่าง: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

93 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server 

ฉันกำลังพยายามทำอะไรบางอย่างในโปรเจ็กต์ที่ฉันไม่แน่ใจว่าเป็นไปได้หรือไม่ฉันกำลังทำอะไรผิดหรือเข้าใจผิด เราใช้ webpack และมีแนวคิดที่จะให้บริการไฟล์ html มากกว่าหนึ่งไฟล์ localhost: 8181 -> ทำหน้าที่ index.html localhost: 8181 / example.html -> ทำหน้าที่ example.html ฉันกำลังพยายามทำโดยตั้งจุดเข้าหลาย ๆ จุดตามเอกสาร : โครงสร้างโฟลเดอร์คือ: / |- package.json |- webpack.config.js /src |- index.html |- example.html | /js |- main.js |- example.js Webpack.config.js: ... entry: { main: './js/main.js', exampleEntry: './js/example.js' }, output: { …

89 webpack  webpack-dev-server 

ใช้ Ubuntu Linux พร้อมติดตั้ง docker ไม่มี VM ฉันสร้างภาพนักเทียบท่าด้วยแอปพลิเคชั่น vuejs ในการเปิดใช้งาน hot reload ฉันเริ่มคอนเทนเนอร์ docker ด้วย: docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image localhost:8081มันเริ่มต้นขึ้นที่ดีและผมสามารถเข้าถึงได้จากเบราว์เซอร์บนโฮสต์ของฉัน แต่เมื่อฉันทำการเปลี่ยนแปลงไฟล์ต้นฉบับและบันทึกการเปลี่ยนแปลงเหล่านั้นพวกเขาจะไม่ปรากฏในเบราว์เซอร์ของฉันก่อนที่ฉันจะกด F5 (hot reload ไม่ทำงาน) รายละเอียดบางอย่างด้านล่าง: package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", สร้าง …

10 docker  vue.js  webpack-dev-server