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

ฉันได้สร้างvue webpackโครงการโดยใช้vue-cliไฟล์. vue init webpack myproject จากนั้นรันโปรเจ็กต์ภายใต้devโหมด: npm run dev ฉันได้รับข้อผิดพลาดนี้: ไม่สามารถโหลดทรัพยากร: เซิร์ฟเวอร์ตอบสนองด้วยสถานะ 404 (ไม่พบ) http: // localhost: 8080 / favicon.ico ดังนั้นใน webpack วิธีการนำเข้าfavicon.icoอย่างถูกต้อง?

94 html  ecmascript-6  webpack  vue.js  favicon 

ฉันกำลังทำงานกับ webpack และฉันต้องดำเนินการ./node_modules/webpack/bin/webpack.jsโดยใช้npxไฟล์. npx webpackจะวิ่งไบนารี webpack ( ./node_modules/webpack/bin/webpack) แต่ทุกครั้งที่ผมดำเนินการ npx webpack bash: npx: command not foundฉันได้รับ ฉันใช้: โหนด: v9.5.0 npm: 5.6.0 nvm: 1.1.5 webpack: 3.11.0

94 node.js  npm  webpack  npx 

/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 

ฉันเห็นข้อผิดพลาดต่อไปนี้เมื่อพยายามเริ่มแอปของฉัน ... > css-modules@1.0.0 start /Users/johnnynolan/Repos/css-modules webpack && เปิด index.html (node:5706) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead /Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (/Users/johnnynolan/Repos/css-modules/node_modules/webpack/lib/Chunk.js:802:9) at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 at Array.forEach (<anonymous>) at /Users/johnnynolan/Repos/css-modules/node_modules/extract-text-webpack-plugin/dist/index.js:171:18 at AsyncSeriesHook.eval [as callAsync] …

92 javascript  npm  webpack 

ฉันใช้ webpack 3.8.1 และได้รับคำเตือน build ต่อไปนี้หลายอินสแตนซ์: WARNING in ./src/Components/NavBar/MainMenuItemMobile.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/MainMenuItemMobile.js Used by 1 module(s), i. e. /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/ConstructedMainMenuItems.js …

92 webpack  webpack-hot-middleware 

ฉันมีไฟล์ภาพหมุนที่ฉันต้องการรับindex.jsและสร้างblock.build.jsดังนั้นของฉันwebpack.config.jsคือ: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] } } ] } }; module.exports = config; package.jsonซึ่งผมใช้อยู่ด้านล่าง: { "name": …

91 reactjs  webpack  babeljs 

ฉันเป็นมือใหม่ Webpack ที่ต้องการเรียนรู้ทั้งหมดเกี่ยวกับเรื่องนี้ ฉันพบความขัดแย้งเมื่อเรียกใช้ webpack โดยบอกฉันว่า: ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js ฉันควรทำอย่างไรเพื่อหลีกเลี่ยงความขัดแย้ง นี่คือ webpack.config.js ของฉัน: module.exports = { context: __dirname + "/app", entry: { 'javascript': "./js/app.js", 'html': "./index.html", }, output: { path: __dirname + "/dist", filename: "app.js", }, resolve: { …

89 javascript  node.js  webpack  config  conflict 

ฉันกำลังพยายามทำอะไรบางอย่างในโปรเจ็กต์ที่ฉันไม่แน่ใจว่าเป็นไปได้หรือไม่ฉันกำลังทำอะไรผิดหรือเข้าใจผิด เราใช้ 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 

ฉันกำลังใช้ตัวอย่างจาก https://github.com/moroshko/react-autosuggest รหัสสำคัญเป็นดังนี้: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, e.g.: // ['Mentone', 'Mill Park', …

89 javascript  json  reactjs  webpack 

เมื่อฉันมีการกำหนดค่าตัวโหลดที่มีการทดสอบหลายรายการที่ตรงกับไฟล์ฉันคาดหวังว่าจะใช้เฉพาะตัวโหลดที่ตรงกันตัวแรกเท่านั้น แต่ดูเหมือนจะไม่เป็นเช่นนั้น ฉันพยายามอ่านแหล่งที่มาแต่เมื่อฉันพบบิตที่ฉันคิดว่าใช้ในการโหลดฉันก็ไม่เข้าใจว่ามันทำงานอย่างไร เอกสารประกอบไม่ได้กล่าวถึงว่าสถานการณ์นั้นควรมีพฤติกรรมอย่างไร

87 webpack 

ฉันมีreactjsแอปที่เขียนโดยใช้มาตรฐาน ES6 และฉันใช้webpackเพื่อสร้างมัน webpackโหลดโมดูลใช้js babel-loaderเพื่อความเฉพาะเจาะจงฉันใช้แพ็คเกจเวอร์ชันต่อไปนี้: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 อย่างไรก็ตามหลังจากที่สร้างมัน IE 10 'Symbol' is undefinedให้ข้อผิดพลาดดังต่อไปนี้ ไม่babelควรจะกำหนดSymbol? มีการกำหนดค่าเฉพาะสำหรับwebpackหรือbabelต้องตั้งค่าเพื่อให้ใช้งานได้หรือไม่ ฉันใช้{stage: 0}การกำหนดค่าใน.babelrcไฟล์. ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมขอบคุณ!

87 reactjs  webpack  babeljs 

ฉันมี: ไฟล์ JS ที่ฉันต้องการรวมไฟล์ LESS ไฟล์ที่ฉันต้องการรวบรวมลงใน CSS (แก้ไข @imports เป็นบันเดิลเดียว) ฉันหวังว่าจะระบุสิ่งเหล่านี้เป็นอินพุตแยกกันสองตัวและมีเอาต์พุตแยกกันสองตัว (น่าจะเป็นผ่าน extract-text-webpack-plugin) Webpack มีปลั๊กอิน / ตัวโหลดที่เหมาะสมทั้งหมดในการคอมไพล์ แต่ดูเหมือนจะไม่ชอบการแยก ฉันเคยเห็นตัวอย่างของผู้ที่ต้องการไฟล์ LESS โดยตรงจาก JS เช่นrequire('./app.less');ไม่มีเหตุผลอื่นใดนอกจากบอกให้ webpack รวมไฟล์เหล่านั้นลงในบันเดิล สิ่งนี้ช่วยให้คุณมีจุดเข้าเพียงจุดเดียว แต่ดูเหมือนว่าฉันผิดจริงๆ - ทำไมฉันต้องใช้ LESS ใน JS ของฉันในเมื่อมันไม่เกี่ยวข้องกับรหัส JS ของฉัน ฉันลองใช้จุดเข้าหลายจุดส่งทั้ง JS รายการและไฟล์ LESS หลักเข้ามา แต่เมื่อใช้จุดเข้าหลายจุด webpack จะสร้างบันเดิลที่ไม่เรียกใช้ JS เมื่อโหลด - มันรวมเข้าด้วยกันทั้งหมด แต่ไม่รู้ สิ่งที่ควรดำเนินการเมื่อเริ่มต้น ฉันใช้ …

86 javascript  css  webpack  build  css-preprocessor 

เมื่อใดก็ตามที่ฉันวิ่งwebpackในเทอร์มินัลฉันจะได้รับ: Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' นี่คือไฟล์webpack.config.jsของฉัน module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } package.json { "name": "react", "version": "1.0.0", "description": "React …

84 javascript  express  reactjs  webpack  babeljs 

ฉันสำรวจความคิดของการใช้WebpackกับBackbone.js ฉันได้ทำตามคู่มือเริ่มใช้งานฉบับย่อและมีแนวคิดทั่วไปเกี่ยวกับการทำงานของ Webpack แต่ฉันไม่ชัดเจนเกี่ยวกับวิธีโหลดไลบรารีการพึ่งพาเช่น jquery / backbone / ขีดล่าง ควรโหลดจากภายนอกด้วย<script>หรือนี่คือสิ่งที่ Webpack สามารถจัดการได้เหมือน shim ของ RequireJS? ตามที่doc webpack: shimming โมดูล , ProvidePluginและexternalsดูเหมือนจะเกี่ยวข้องกับเรื่องนี้ (เพื่อให้เป็นbundle!ที่ใดที่หนึ่งรถตักดิน) แต่ฉันไม่สามารถคิดออกเมื่อมีการใช้งานที่ ขอบคุณ

84 backbone.js  requirejs  amd  webpack 

ฉันใช้ webpack ด้วยHtmlWebpackPlugin, และhtml-loader file-loaderฉันมีโครงสร้างโครงการง่าย ๆ ที่ฉันไม่ใช้เฟรมเวิร์ก แต่เป็นตัวพิมพ์ดีดเท่านั้น ดังนั้นผมเขียนโค้ด HTML index.htmlของฉันโดยตรงกับ ฉันยังใช้ไฟล์ HTML นี้เป็นเทมเพลตของฉันHtmlWebpackPluginด้วย ในฐานะที่เป็นเว็บไซต์ทั้งหมดฉันจำเป็นต้องใส่ภาพซึ่งอ้างถึง PNG ในโฟลเดอร์เนื้อหาของฉัน file-loaderควรโหลดไฟล์อย่างถูกต้องใส่ชื่อไฟล์ใหม่ภายในsrcแท็ก แต่นั่นไม่ใช่สิ่งที่เกิดขึ้น แต่เป็นค่าของแท็กฉันมีsrc [object Module]ฉันถือว่าfile-loaderปล่อยวัตถุบางอย่างและมันจะแสดงเช่นนี้เมื่อ.toString()วิธีการทำงานของมัน อย่างไรก็ตามฉันเห็นว่าfile-loaderประมวลผลไฟล์สำเร็จแล้วและปล่อยออกมาด้วยชื่อใหม่ไปยังพา ธ เอาต์พุต ฉันไม่มีข้อผิดพลาด index.htmlนี่คือการตั้งค่าของฉันและ webpack const projectRoot = path.resolve(__dirname, '..'); { entry: path.resolve(projectRoot, 'src', 'app.ts'), mode: 'production', output: { path: path.resolve(projectRoot, 'dist'), filename: 'app.bundle.js' }, resolve: { …

40 javascript  html  webpack