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

ฉันพยายามที่จะสรุปความรู้ของฉันเกี่ยวกับตัวจัดการแพคเกจจาวาสคริปต์ที่เป็นที่นิยมมากที่สุดผู้รวบรวมและผู้รันภารกิจ โปรดแก้ไขให้ฉันถ้าฉันผิด: npm& bowerเป็นผู้จัดการแพคเกจ พวกเขาเพียงแค่ดาวน์โหลดการอ้างอิงและไม่ทราบวิธีการสร้างโครงการด้วยตัวเอง สิ่งที่พวกเขารู้คือการโทรwebpack/ gulp/ gruntหลังจากดึงการอ้างอิงทั้งหมด bowerเป็นเหมือนnpmแต่สร้างต้นไม้พึ่งพาอาศัยแบบแบน (ไม่เหมือนต้นไม้npmที่เรียกซ้ำ) หมายถึงการnpmดึงการอ้างอิงสำหรับการพึ่งพาแต่ละครั้ง (อาจดึงเหมือนกันสองสามครั้ง) ในขณะที่bowerคาดว่าคุณจะรวมการพึ่งพาย่อยด้วยตนเอง บางครั้งbowerและnpmใช้ร่วมกันสำหรับ front-end และ back-end ตามลำดับ (เนื่องจากเมกะไบต์แต่ละตัวอาจมีปัญหาใน front-end) gruntและgulpเป็นนักวิ่งภารกิจที่จะทำให้ทุกอย่างเป็นไปโดยอัตโนมัติ (เช่นการคอมไพล์ CSS / Sass, ปรับภาพให้ดีที่สุด, สร้างมัดและย่อขนาด / transpile) gruntเทียบกับgulp(เป็นเหมือนmavenเทียบgradleหรือการกำหนดค่าเมื่อเทียบกับรหัส) ฮึดฮัดจะขึ้นอยู่กับการกำหนดค่างานแยกต่างหากแต่ละงานเปิด / จัดการ / ปิดไฟล์ อึกต้องใช้จำนวนน้อยรหัสและเป็นไปตามกระแสโหนดซึ่งช่วยให้มันสามารถสร้างไปป์ที่โยงโซ่ (w / o เปิดไฟล์เดียวกันอีกครั้ง) และทำให้มันเร็วขึ้น webpack( webpack-dev-server) - สำหรับฉันมันเป็นงานที่มีการโหลดใหม่ของการเปลี่ยนแปลงที่ช่วยให้คุณลืมเกี่ยวกับนักดู JS / CSS ทั้งหมด npm/ …

1886 gruntjs  npm  gulp  bower  webpack 

ฉันใช้ Webpack ในแอปพลิเคชันของฉันซึ่งฉันสร้างจุดเข้าใช้งานสองจุด - bundle.js สำหรับไฟล์ / รหัส JavaScript ทั้งหมดของฉันและผู้ขาย.jsสำหรับห้องสมุดทั้งหมดเช่น jQuery และ React ฉันจะทำอย่างไรเพื่อใช้ปลั๊กอินที่มี jQuery เป็นการอ้างอิงของพวกเขาและฉันต้องการให้พวกเขายังอยู่ใน vendor.js? เกิดอะไรขึ้นถ้าปลั๊กอินเหล่านั้นมีการขึ้นต่อกันหลายอย่าง? ขณะนี้ฉันกำลังพยายามที่จะใช้ jQuery นี้ปลั๊กอินที่นี่ - https://github.com/mbklein/jquery-elastic เอกสารประกอบ Webpack ระบุถึงPluginและimport -loader ฉันใช้ ProvidePlugin แต่ก็ยังไม่พบวัตถุ jQuery นี่คือลักษณะของ webpack.config.js ของฉัน - var webpack = require('webpack'); var bower_dir = __dirname + '/bower_components'; var node_dir = __dirname + …

451 javascript  jquery  amd  webpack 

วิธีที่ดีที่สุดในการรวม Angular (รุ่น 2, 4, 6, ... ) สำหรับการผลิตบนเว็บเซิร์ฟเวอร์สดคืออะไร โปรดรวมเวอร์ชันแองกูลาร์ไว้ในคำตอบเพื่อให้เราสามารถติดตามได้ดีขึ้นเมื่อมันเปลี่ยนเป็นรีลีสในภายหลัง

353 angular  webpack  systemjs  angular-cli 

ฉันได้สร้างโครงการ React เปล่าโดยใช้คำสั่ง: npx create-react-appบน npm v7.0.7 และ Node v15.0.1 ติดตั้ง: ตอบสนอง v17.0.1 โหนด -sass v5.0.0 จากนั้นฉันพยายามนำเข้าไฟล์. scss เปล่าไปยังส่วนประกอบของแอพ: App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; โยนข้อผิดพลาด: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible …

338 reactjs  webpack  create-react-app  node-sass  sass-loader 

ฉันพยายามที่จะย้ายจากไปGulp WebpackในGulpฉันมีงานที่คัดลอกไฟล์และโฟลเดอร์ทั้งหมดจาก/ คงที่ /โฟลเดอร์ไปที่/ สร้าง /โฟลเดอร์ วิธีการทำเช่นเดียวกันกับWebpack? ฉันต้องการปลั๊กอินไหม

330 javascript  webpack 

ฉันใหม่กับ webpack และฉันต้องการมือในการตั้งค่าเพื่อสร้างซอร์สแผนที่ ฉันทำงานwebpack serveจากบรรทัดคำสั่งซึ่งรวบรวมได้สำเร็จ แต่ฉันต้องการซอร์สแผนที่จริงๆ webpack.config.jsนี้เป็นของฉัน var webpack = require('webpack'); module.exports = { output: { filename: 'main.js', publicPath: '/assets/' }, cache: true, debug: true, devtool: true, entry: [ 'webpack/hot/only-dev-server', './src/components/main.js' ], stats: { colors: true, reasons: true }, resolve: { extensions: ['', '.js', '.jsx'], alias: { 'styles': __dirname + …

328 javascript  webpack  build-process  babeljs  source-maps 

ฉันพยายามแปลงแอพเชิงมุมจากอึกเป็น webpack ในอึกฉันใช้ gulp-preprocess เพื่อแทนที่ตัวแปรบางอย่างในหน้า html (เช่นชื่อฐานข้อมูล) ขึ้นอยู่กับ NODE_ENV วิธีที่ดีที่สุดในการบรรลุผลลัพธ์ที่คล้ายกันกับ webpack คืออะไร

306 javascript  webpack 

ฉันเริ่มโครงการ vue.js ใหม่ดังนั้นฉันจึงใช้เครื่องมือ vue-cli เพื่อพิจารณาโครงการ webpack ใหม่ (เช่นvue init webpack) ขณะที่ฉันกำลังเดินผ่านไฟล์ที่สร้างขึ้นฉันสังเกตเห็นการนำเข้าต่อไปนี้ในsrc/router/index.jsไฟล์: import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) …

273 javascript  webpack  ecmascript-6  vue.js 

ฉันกำลังใช้ Angular 2+ และ Angular CLI ฉันจะเพิ่มแบบอักษรที่ยอดเยี่ยมให้กับโครงการของฉันได้อย่างไร

269 angular  webpack  angular-cli 

สถานะเอกสาร Webpackที่output.publicPath: output.pathจากมุมมองของจาวาสคริปต์ คุณช่วยอธิบายความหมายของสิ่งนี้ได้จริงไหม? ฉันใช้output.pathและoutput.filenameเพื่อระบุตำแหน่งที่ Webpack ควรแสดงผลลัพธ์ แต่ฉันไม่แน่ใจว่าควรใส่อะไรoutput.publicPathและจำเป็นต้องใช้หรือไม่ module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } }

250 javascript  webpack 

ผมเคยอ่านไม่กี่ หน้าเกี่ยวกับโมดูลร้อนทดแทนใน Webpack มีแม้กระทั่งแอพตัวอย่างที่ใช้ใช้มัน ฉันอ่านทั้งหมดแล้วและยังไม่เข้าใจ ฉันจะทำอย่างไรกับมัน? มันควรจะใช้เฉพาะในการพัฒนาและไม่ได้อยู่ในการผลิต? มันเหมือน LiveReload แต่คุณต้องจัดการมันด้วยตัวเอง? WebpackDevServer ผสานรวมกับ LiveReload อย่างใดหรือไม่? สมมติว่าฉันต้องการอัปเดต CSS (หนึ่งสไตล์ชีท) และโมดูล JS เมื่อฉันบันทึกลงในดิสก์โดยไม่ต้องโหลดหน้าซ้ำและไม่ต้องใช้ปลั๊กอินเช่น LiveReload นี่เป็นสิ่งที่ Hot Module Replacement สามารถช่วยฉันได้หรือไม่ ฉันต้องทำงานประเภทใดและ HMR ให้บริการอะไรแล้ว

245 javascript  module  livereload  webpack 

ฉันมีสองคำถาม 1) CSS LoaderและStyle Loaderเป็นสอง webpack loader ฉันไม่เข้าใจความแตกต่างระหว่างสองคนนี้ ทำไมฉันถึงต้องใช้สองโฮเมื่อพวกเขาทั้งสองทำงานเดียวกัน? 2) .useable.less และ .useable.css นี้ที่กล่าวถึงในไฟล์ Readme.md ข้างต้นคืออะไร

238 webpack  webpack-style-loader 

นี่ฉัน webpack.config.js var webpack = require("webpack"); module.exports = { entry: "./entry.js", devtool: "source-map", output: { path: "./dist", filename: "bundle.min.js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({minimize: true}) ] }; ฉันกำลังสร้างด้วย $ webpack ในdistโฟลเดอร์ของฉันฉันได้รับเท่านั้น bundle.min.js bundle.min.js.map ฉันต้องการเห็นสิ่งที่ไม่ได้บีบอัดด้วย bundle.js

233 javascript  node.js  webpack 

ฉันกำลังสร้างแอปพลิเคชัน Angular แรกของฉันและฉันจะคิดออกว่าบทบาทของโมดูลตัก ทำไมเราต้องการพวกเขา ฉันพยายามค้นหาและค้นหาใน Google และฉันไม่เข้าใจว่าทำไมเราต้องติดตั้งหนึ่งในนั้นเพื่อเรียกใช้แอปพลิเคชันของเรา มันไม่เพียงพอที่จะใช้importเพื่อโหลดเนื้อหาจากโหนดโมดูลใช่ไหม ฉันได้ทำตามบทช่วยสอนนี้ (ที่ใช้ SystemJS) และทำให้ฉันใช้systemjs.config.jsไฟล์: /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'transpiled', // 'dist', '@angular': …

222 angular  webpack  systemjs  node-modules 

ฉันพยายามเรียกใช้รหัส ES6 ในโครงการของฉัน แต่ฉันได้รับข้อผิดพลาดในการส่งออกโทเค็นที่ไม่คาดคิด export class MyClass { constructor() { console.log("es6"); } }

221 javascript  ecmascript-6  webpack  babel