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

วิธีการใช้ ES6 ใน webpack.config ชอบ repo นี้ https://github.com/kriasoft/react-starter-kit ทำอะไร ตัวอย่างเช่น ใช้สิ่งนี้ import webpack from 'webpack'; แทน var webpack = require('webpack'); มันค่อนข้างอยากรู้อยากเห็นมากกว่าความต้องการ

210 webpack 

ขณะนี้ฉันกำลังใช้ ES6 ในแอป React ผ่าน webpack / babel ฉันใช้ไฟล์ดัชนีเพื่อรวบรวมส่วนประกอบทั้งหมดของโมดูลและส่งออก น่าเสียดายที่มีลักษณะเช่นนี้: import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; ดังนั้นฉันจึงสามารถนำเข้าจากที่อื่นเช่นนี้: import { Comp1, Comp2, Comp3 } from './components'; เห็นได้ชัดว่านั่นไม่ใช่ทางออกที่ดีมากดังนั้นฉันจึงสงสัยว่าถ้ามีวิธีอื่น ฉันดูเหมือนจะไม่สามารถส่งออกส่วนประกอบที่นำเข้าได้โดยตรง

201 javascript  ecmascript-6  webpack  babeljs 

มีวิธีใดที่คุณสามารถหยุดไม่ให้moment.jsโหลดโลแคลทั้งหมด (ฉันต้องการภาษาอังกฤษ) เมื่อคุณใช้เว็บแพค? ฉันกำลังดูแหล่งที่มาและดูเหมือนว่าหากhasModuleมีการกำหนดไว้ซึ่งเป็นของ webpack ก็จะพยายามrequire()ทุกสถานที่ ฉันค่อนข้างมั่นใจว่าต้องมีคำขอดึงเพื่อแก้ไข แต่มีวิธีใดบ้างที่เราสามารถแก้ไขได้ด้วยการกำหนดค่า webpack นี่คือ webpack config ของฉันที่จะโหลดโมเมนต์ js: resolve: { alias: { moment: path.join(__dirname, "src/lib/bower/moment/moment.js") }, }, require('moment')จากนั้นทุกที่ฉันต้องการมันผมก็ทำ ใช้งานได้ แต่กำลังเพิ่มไฟล์ภาษาที่ไม่ต้องการลงในบันเดิลของฉันประมาณ 250 kB นอกจากนี้ฉันกำลังใช้รุ่นชั่วครู่ของซุ้มประตูและอึก นอกจากนี้หากไม่สามารถแก้ไขได้โดยการกำหนดค่าเว็บแพคนี่เป็นลิงค์ไปยังฟังก์ชั่นที่โหลดโลแคล ฉันพยายามเพิ่ม&& module.exports.loadLocalesไปยังifคำสั่ง แต่ฉันเดา webpack ไม่จริงทำงานในลักษณะที่ว่าจะทำงาน มันก็requires ไม่ว่าสิ่งที่ ฉันคิดว่ามันใช้ regex ตอนนี้ดังนั้นฉันไม่รู้จริงๆว่าคุณจะแก้ไขได้อย่างไร

199 javascript  gulp  momentjs  webpack 

ฉันกำลังพยายามทำให้สินทรัพย์เข้า / ออกโดยอัตโนมัติ ฉันมี config.js ต่อไปนี้: module.exports = { context: __dirname + "/lib", entry: { main: [ "./baa.ts" ] }, output: { path: __dirname + "/dist", filename: "foo.js" }, devtool: "source-map", module: { loaders: [ { test: /\.ts$/, loader: 'awesome-typescript-loader' }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: …

189 webpack 

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

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

ฉันใช้สร้างปฏิกิริยาแอปejectและไม่ต้องการที่จะ ไม่ชัดเจนว่าที่ใดที่ฟอนต์ที่นำเข้าผ่าน @ font-face และโหลดแบบโลคัลควรดำเนินการ คือฉันกำลังโหลด @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } ข้อเสนอแนะใด ๆ - แก้ไข รวมถึงส่วนสำคัญที่ Dan อ้างถึงในคำตอบของเขา ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 …

177 css  reactjs  fonts  webpack  create-react-app 

ฉันสร้างโครงการ ReactJS ด้วยcreate-react-appแพ็คเกจและใช้งานได้ดี แต่ฉันไม่สามารถค้นหาไฟล์และการกำหนดค่าของwebpack ได้ react-create-app ทำงานกับ webpack อย่างไร ไฟล์การกำหนดค่า webpack อยู่ที่ไหนในการติดตั้งเริ่มต้นด้วยcreate-react-app? ฉันไม่พบไฟล์การกำหนดค่าในโฟลเดอร์ของโครงการ ฉันยังไม่ได้สร้างไฟล์ปรับแต่งแทนที่ ฉันสามารถจัดการการตั้งค่าคอนฟิเกอเรชันกับบทความอื่น ๆ แต่ฉันต้องการค้นหาไฟล์ปรับแต่งแบบธรรมดา

174 javascript  reactjs  webpack  ecmascript-6  create-react-app 

ฉันกำลังพยายามทำสิ่งที่ฉันเชื่อว่าควรจะเป็นไปได้ แต่ฉันไม่เข้าใจจริงๆว่าจะทำอย่างไรจากเอกสารของ webpack ฉันกำลังเขียนไลบรารี JavaScript ที่มีหลายโมดูลที่อาจหรือไม่ขึ้นอยู่กับกัน ยิ่งไปกว่านั้น jQuery ใช้โดยโมดูลทั้งหมดและบางโมดูลอาจต้องใช้ปลั๊กอิน jQuery ไลบรารีนี้จะใช้ในเว็บไซต์ต่าง ๆ ซึ่งอาจต้องใช้โมดูลบางส่วนหรือทั้งหมด การกำหนดการพึ่งพาระหว่างโมดูลของฉันนั้นง่ายมาก แต่การกำหนดการพึ่งพาบุคคลที่สามของพวกเขาดูเหมือนจะยากกว่าที่ฉันคาดไว้ สิ่งที่ฉันต้องการบรรลุ : สำหรับแต่ละแอพฉันต้องการมีไฟล์บันเดิลสองไฟล์หนึ่งไฟล์ซึ่งมีการอ้างอิงจากบุคคลที่สามที่จำเป็นและอื่น ๆ ด้วยโมดูลที่จำเป็นจากห้องสมุดของฉัน ตัวอย่าง : ลองนึกภาพว่าห้องสมุดของฉันมีโมดูลต่อไปนี้: a (ต้องการ: jquery, jquery.plugin1) b (ต้องการ: jquery, a) c (ต้องการ: jquery, jquery.ui, a, b) d (ต้องการ: jquery, jquery.plugin2, a) และฉันมีแอพ (ดูเป็นไฟล์รายการที่ไม่ซ้ำ) ที่ต้องใช้โมดูล a, b และ c Webpack …

173 javascript  webpack  external-dependencies 

ฉันเพิ่มแพ็กเกจ npm ใหม่ให้กับโครงการของฉันและต้องการมันในหนึ่งในโมดูลของฉัน ตอนนี้ฉันได้รับข้อความนี้จาก webpack build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB". มันหมายความว่าอะไร? ฉันจำเป็นต้องดำเนินการบ้างไหม?

165 webpack  babeljs 

ไม่มีใครรู้วิธีการสร้างเส้นทางออกหลายเส้นทางในไฟล์ webpack.config.js ฉันใช้ bootstrap-sass ซึ่งมาพร้อมกับไฟล์ฟอนต์ต่าง ๆ เป็นต้นสำหรับ webpack ในการประมวลผลเหล่านี้ฉันได้รวมตัวโหลดไฟล์ซึ่งทำงานอย่างถูกต้องอย่างไรก็ตามไฟล์ที่เอาต์พุตถูกบันทึกไว้ในพา ธ เอาต์พุตที่ฉันระบุ ส่วนที่เหลือของไฟล์ของฉัน: output: { path: __dirname + "/js", filename: "scripts.min.js" } ฉันต้องการบรรลุสิ่งที่ฉันสามารถดูประเภทส่วนขยายสำหรับสิ่งที่ webpack กำลังแสดงผลและสำหรับสิ่งที่ลงท้ายด้วย. woff. eot, ฯลฯ ให้พวกเขาหันเหความสนใจไปที่เส้นทางออกที่แตกต่างกัน เป็นไปได้ไหม ฉันทำ googling นิดหน่อยและพบปัญหานี้ใน github ที่มีวิธีแก้ไขปัญหาสองข้อเสนอแก้ไข: แต่ดูเหมือนว่าคุณจำเป็นต้องรู้จุดเข้าใช้งานเพื่อระบุเอาต์พุตโดยใช้วิธีแฮชเช่น: var entryPointsPathPrefix = './src/javascripts/pages'; var WebpackConfig = { entry : { a: entryPointsPathPrefix + '/a.jsx', …

165 path  output  config  webpack  loader 

ฉันยังสับสนกับวิธีการแก้ไขเส้นทางโมดูลด้วย webpack ตอนนี้ฉันเขียน: myfile = require('../../mydir/myfile.js') แต่ฉันต้องการเขียน myfile = require('mydir/myfile.js') ฉันคิดว่าresolve.aliasอาจช่วยตั้งแต่ผมเห็นตัวอย่างที่คล้ายกันโดยใช้เป็นชื่อแทนแล้วฉันสามารถ{ xyz: "/some/dir" }require("xyz/file.js") แต่ถ้าผมตั้งนามแฝงของฉันไป{ mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') จะไม่ทำงาน ฉันรู้สึกโง่เพราะฉันอ่านเอกสารหลายครั้งและฉันรู้สึกว่าขาดอะไรบางอย่างไป อะไรคือวิธีที่ถูกต้องในการหลีกเลี่ยงการเขียนความสัมพันธ์ทั้งหมดที่มีกับ../../etc?

164 javascript  webpack 

ฉันเห็นคนใช้อึกกับ webpack แต่แล้วฉันอ่าน webpack สามารถแทนที่อึก? ฉันสับสนอย่างสมบูรณ์ที่นี่ ... ใครสามารถอธิบายได้บ้าง UPDATE ในที่สุดฉันก็เริ่มด้วยอึก ฉันยังใหม่กับ Front-end ที่ทันสมัยและเพียงแค่ต้องการลุกขึ้นและวิ่งเร็ว ตอนนี้ฉันเปียกเท้าหลังจากผ่านไปหนึ่งปีฉันพร้อมที่จะย้ายไปที่เว็บแพค ฉันขอแนะนำเส้นทางเดียวกันสำหรับผู้ที่เริ่มต้นในรองเท้าเดียวกัน ไม่ได้บอกว่าคุณไม่สามารถลอง webpack ได้ แต่เพียงแค่บอกว่าถ้ามันดูซับซ้อนเริ่มต้นด้วยอึกก่อน ... ไม่มีอะไรผิดปกติกับมัน หากคุณไม่ต้องการอึกใช่ก็มีเสี้ยงฮึดฮัด แต่คุณสามารถระบุคำสั่งใน package.json ของคุณและเรียกพวกเขาจากบรรทัดคำสั่งโดยไม่ต้องมี task runner เพียงเพื่อเริ่มต้นและเริ่มทำงาน ตัวอย่างเช่น: "scripts": { "babel": "babel src -d build", "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js", "build": "npm run clean && npm run babel && …

161 node.js  webpack  gulp 

ฉันเพิ่งเริ่มต้นกับ webpack และมีปัญหาในการสร้างตัวอย่างหลายจุดเริ่มต้นเพื่อสร้าง ไฟล์ webpack.config.js ในตัวอย่างประกอบด้วยบรรทัด var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin"); ซึ่งล้มเหลวสำหรับฉันด้วยข้อผิดพลาด Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin' ฉันพบตัวอย่างอื่น ๆ ของการใช้ CommonsChunkPlugin พร้อมกับนิพจน์ var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js"); ซึ่งล้มเหลวด้วยข้อผิดพลาด ReferenceError: webpack is not defined การค้นหาเพิ่มเติมบางอย่างพบจำนวนตัวอย่างรวมถึง var webpack = require('webpack'); และตอนนี้งานสร้างของฉันก็ล้มเหลวด้วย Error: Cannot find module 'webpack' ฉันกำลังสูญเสียเกี่ยวกับวิธีการดำเนินการต่อไป

152 node.js  webpack 

ฉันใช้ create-react-app ฉันพยายามโทรภาพจากโฟลเดอร์สาธารณะของฉันจากไฟล์ในsrc/componentsตัว ฉันได้รับข้อความแสดงข้อผิดพลาดนี้ ./src/components/website_index.js ไม่พบโมดูล: คุณพยายามที่จะนำเข้า ../../public/images/logo/WC-BlackonWhite.jpg ซึ่งอยู่นอกไดเรกทอรีโครงการ src / ไม่รองรับการนำเข้าญาตินอก src / คุณสามารถย้ายภายใน src / หรือเพิ่ม symlink ลงใน node_modules / ของโครงการ import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> ฉันได้อ่านหลายสิ่งหลายอย่างที่บอกว่าคุณสามารถนำเข้าเส้นทาง แต่นั่นก็ยังไม่ทำงานสำหรับฉัน ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. ฉันรู้ว่ามีคำถามมากมายเช่นนี้ แต่พวกเขากำลังบอกให้ฉันนำเข้าโลโก้หรือรูปภาพดังนั้นฉันจึงพลาดอะไรบางอย่างในภาพรวม

150 javascript  reactjs  webpack  create-react-app 

เป็นไปได้ไหมที่จะกำหนดตัวแปรส่วนกลางด้วย webpack เพื่อให้ได้ผลลัพธ์ดังนี้: var myvar = {}; ตัวอย่างทั้งหมดที่ฉันเห็นใช้ไฟล์ภายนอก require("imports?$=jquery!./file.js")

149 javascript  webpack  webpack-2  webpack-3