Tag: webpack

如何使用HTMLWebpackPlugin通过webpack加载图像？

我正在使用HTMLWebpackPlugin，并在我的模板中有一个img标签： <img src="./images/logo/png"> 如果你注意到，在这里我使用了一个相对path思维的webpack将触发configuration在我的webpack.config.js文件中的文件加载器，但编译后，我得到了完全相同的src属性在我的html： <img src="./images/logo/png"> 我怎样才能触发webpackdynamicreplace这些相对path，以及无论我在我的webpackconfigurationconfiguration？

用Webpack绑定非本地npm模块

描述 我有一个nodejs + TypeScript + express项目，当前源*.ts文件与webpack捆绑在一起， webpack被webpack-node-externals忽略。 当我在Docker中部署bundle.js时，我仍然需要在目标映像上运行npm i –production来安装依赖项，它将安装package.json列出的所有模块 问题： 如果我只使用lodash中没有本地部分的一个函数 ，则整个lodash模块（4.8MB）仍被安装（这是预期的）。 这会导致一个巨大的node_modules文件夹，其中node_modules中的函数并不总是必须使用。 当使用Docker容器化应用程序时，这个问题尤其普遍。 有没有办法将非本地模块与Webpack捆绑在一起，同时保留本地模块？

为了实现Angular SSR，node.js服务器需要webpack + typescript

我有一个现有的项目，Node API + Angular项目： https ： //framagit.org/mael-jarnole/talebear/tree/master 我正在尝试使用官方指南来实施SSR： https ： //angular.io/guide/universal 这是我的WiP： https ：//framagit.org/mael-jarnole/talebear/tree/ssr-wip SSR软件包和常规的Angular应用程序似乎构build得很好，我的问题是快速服务器实现：到目前为止，Webpack输出大量的警告和错误，我不明白（可能来自我对webpack的缺乏知识），似乎是来自第三方jsimport（mongoose，头盔等） 我的问题是： 是否有必要使用Webpack和打字机的节点服务器？ 移植代码可能会很长，我以非常快的方式完成，而且到目前为止，它并不是非常类似于脚本的。 我很想坚持我的JavaScript实施工作。 为什么在我的SSR分支上运行npm run webpack:server时出现错误？ 如果第一个问题的答案是肯定的，那么我应该修改什么才能使Webpack工作正常？ 我应该在哪里看？ 官方指南中的configuration输出一个巨大的server.js文件 对不起，如果我的问题太广泛了！ 感谢您的帮助。

使用Webpack捆绑后端（Node）代码有什么好处？

相关： “Webpack为后端？” “没有理由不使用节点/ io.js代码的webpack …” 通过weback打包整个应用程序的macros伟目标。 使用Webpack捆绑服务器端代码的目的是什么？ 使用Webpack + Node与Node相比有没有什么优势？ 热重新载入你说？ 在开发过程中，热重新加载是否比自动服务器重新启动（通过nodemon或相关工具）要好得多？ 别名结束../../../../噩梦？ 还有很多其他的解决scheme ，包括babel-plugin-module-resolver 。 如果您正在构build一个带有Node（后端）后端和React前端的Web应用程序，特别是使用预先configuration了Webpack的Create React App构build的前端？ 我已经更新了我的问题，包括促使我提出这个问题的参考资料，但仍被搁置。 为什么是这样？

安装带有Node后端的webpack hot dev-server进行生产

我有一个与webpack绑定的前端应用程序，由一个Node后端服务器提供服务并与之通话。 Webpack热开发服务器在8080上运行。 节点后端在1985运行。 我想从Node提供index.html ，但想在开发期间从热开发服务器提供资源。 为了达到这个我有： 在webpack config中设置一个绝对的publicPath值： output: { publicPath: 'http://localhost:8080/' }, 并使用index.html绝对URL指向热开发服务器： <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="http://localhost:8080/js/vendors.js"></script> <script src="http://localhost:8080/js/bundle.js"></script> 所以我可以运行热开发服务器并运行我的节点服务器并浏览到http://localhost:1985 。 一切都很好。 但是当我来部署/运行生产时，这绝对不是我想要的。 我想要bundle.js和bundle.js相对URL，我绝对不想包含webpack-dev-server.js脚本。 我可以在服务器上使用Handlebars或其他模板来指定绝对/相对path，但不能提供清除热开发服务器脚本的干净方式。 我也可以为每个设置有不同的索引文件，但这似乎很快就会导致错误。 这怎么能够被最好地结构化/部署，以便在开发中使用热开发服务器，同时仍然允许通过节点在生产中部署和服务整个事物？

使用webpack，我可以将Node.js和浏览器代码放在同一个文件中，但阻止Node.js代码将其传送到浏览器？

我有一个文件，我想同时具有Node.js和浏览器代码。 Node.js代码不应该在浏览器中可见。 webpack可以根据环境从文件中排除代码吗？ 有点像C预处理指令。 #if #else, etc 。 我知道Webpack对代码进行了相当深入的分析，这让我认为它可以。 约束 Node.js代码无法访问浏览器，因为它可能包含敏感的configuration选项。 我希望浏览器和节点代码在同一个文件中。 我知道我可以使用webpack.IgnorePlugin忽略需要在文件的基础上，或将共享代码在浏览器中的文件，并要求从服务器（我现在正在做），但我想知道是否有可能将代码并排放在同一个文件中。 编辑：这是我想要做的一个例子。 export class FooPlugin { $name = 'foo-plugin' register(app) { const app = koa() app.get('/foo', () => { this.send('foo') }) app.set('SECRET STUFF!') app.start() this.shared() } shared(app) { // browser things – isomorphic react router routes, etc. } registerBrowser(app) { this.shared() } } […]

与Webpack和Babel一起使用Benchmarkjs

我试图得到一些基本的基准testing工作，并无法找出正确的configuration。 我试图使用webpack和babel Benchmarkjs来将我的代码转换成es5。 我创build了一个benchmarks.webpack.js作为入口点，如下所示： var context = require.context('./src/js', true, /-benchmark\.js$/); context.keys().forEach(context); module.exports = context; 然后我有一个我想运行的基准testing文件（ test-benchmark.js ）： import benchmark from 'benchmark'; import benchmarks from 'beautify-benchmark'; let suite = new benchmark.Suite; suite.add('RegExp#test', function() { /o/.test('Hello World!'); }) .add('String#indexOf', function() { 'Hello World!'.indexOf('o') > -1; }) .on('cycle', function(event) { benchmarks.add(event.target); }) .on('complete', function() { benchmarks.log(); }) .run(); […]

React JS：console.debug不是一个函数

我正在运行一个ReactJsnetworking应用程序，我的web运行在webpack-dev-server中，但是在我捆绑我的代码之后，chrome / firefox控制台总是出现“Uncaught TypeError：console.debug不是函数”，我不知道如何解决这个问题。

使用Webpack Dev Server来处理未打包的文件

我目前使用webpack-dev-server来提供一个由webpack打包的javascript包。 有几个文件，我想通过开发服务器提供，但没有捆绑在其余的。 有没有办法揭露这样做的路线？ 例如： /bundle.js <— normal webpack bundle /other-resources/file-a.js /other-resources/file-b.js 我已经检查了文档，但阅读后，我不知道它是否真的支持它。

解决node_modules通过webpack跨多个兄弟项目启动文件夹的path

我有几个兄弟文件夹/回购： | – A | |- node_modules | |- app | | – B | |- node_modules | |- app | | – C | |- node_modules | |- app 由于交叉依赖关系，所以A可能需要B的脚本。 // A/app/script.js var bDependency = require('B/app/script.js') // B/app/script.js var jquery = require('jquery') 在这个例子中，当webpack进行绑定时，它会在A之前parsing为node_modules B node_modules 。 这也会导致webpack bundle.js中的模块重复，因为它可能parsing为其他同级node_modules文件夹。 （这是甚至在new webpack.optimize.DedupePlugin() ）后的情况 所以我将不得不npm install在B包，即使它是A需要它，并已经安装了库。 我正在使用解决scheme，根和modulesDirectories的webpack选项已经为一些友好的pathparsing。 […]