Tag: webpack dev server

Webpack重新编译未更改的文件，从而减慢构build时间: 相关的webpack / webpack的问题。根据我的经验，在实际项目中使用webpack会减慢一定数量的组件和/或依赖项。我有一个testing存储库，试图用下面的应用程序来演示这个：入口点是A.js ，它需要B.js和C.js B.js很小，没有太多的依赖关系。 C.js是单一的，有成千上万的需求。我的期望是，当在testing项目中使用webpack-dev-server时，每当我保存B.js ，webpack应该认识到C.js并没有触及它的依赖关系。它应该快速地（<10ms）编译B.js ，replace它在caching中，并从初始编译中使用A.js的caching版本输出编译后的A.js 但是，每次保存B.js时，webpack都会编译3002隐藏模块，导致编译时间为960ms 。这本身并不坏，但如果你添加一些像react-hot和babel这样的装载机， react-hot失去控制。我有一个解决scheme：在同一个testing项目有一个dll分支。在那个分支上，你可以运行webpack –config webpack.dll.config.js来生成B.js和C.js两个DLL， B.js DLL在编译A.js时候会被A.js 。之后，当使用webpack-dev-server ，每当你保存B.js ，它的DLL就会被重新编译， A.js会注意到它的一个DLL已经更新了，它只会把C.js的旧DLL和B.js新DLL，并将它们合并成一个快乐的快乐包。我可以进一步在这个分支上做目录读取或依赖图走，为每个组件生成一个DLL，这个方法可能被应用到每个webpack项目。这在理论上应该尽可能快地编译。但在这一点上，在我看来，我将重新实现（糟糕的）webpack中的caching层应该做什么，所以这里发生了什么？

在webpack包中运行Webpack Dev Server: 我有一个用Express运行的节点服务器的webpackconfiguration。如果在生产环境中的条目文件运行Express服务器，如果在开发中也运行Express服务器和Webpack Dev服务器。问题出在webpack dev服务器初始化的时候; 它抱怨Unhandled rejection Error: invalid argument或找不到path。 webpack dev服务器中使用的客户端configuration在通过CLI自行使用时运行良好，当webpackdevserver在常规（非捆绑）文件中初始化时，它也可以使用。与每种方法的不同之处在于，从configuration中打印的path在工作的情况和不工作的情况之间是不同的。这些path是从不同的__dirnameparsing的。为什么可以这样做，是否有可能获得正常的__dirnamepath？提前致谢。服务器configuration： { target: 'node', entry: rootDirectory, externals: nodeModules,//readDirSync('node_modules').filter(x => x !== '.bin'), output: { path: join(rootDirectory, 'build'), filename: 'index.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }, plugins: [ new DefinePlugin({ 'process.env': […]

Typescript + webpack（带有热重载）+ NodeJS: 面对问题 – build立基于TypeScript的项目原型。它包含客户端脚本和服务器部分（带有ExpressJ的NodeJs）。我想有一个打包机的webpack，并使用热重新加载function，以查看飞行中的变化。最初，我使用了react-transform-boilerplate-ts ，但那里的问题 – 开发服务器的入口点是js文件。我想这应该是ts，因为我想包括我的快速configuration等。那么，有没有人有好的样板（遵循项目结构的最佳实践）来创build包含以下内容的项目：客户端（React）和服务器（打字稿）后端使用NodeJs和ExpressJs（打字稿）客户端和服务器支持热重新加载（因为我明白最好的select – 是重新加载的webpack选项，而不是吞咽任务，运行观看）。或者，也许你可以给我很好的build议，如何以适当的方式configuration这种东西。非常感谢

WebPack源地图混淆（重复的文件）: 我决定尝试一下我今天轮到的一个新项目WebPack，我从源代码中得到了非常奇怪的行为。在文档中找不到任何关于它的内容，在浏览StackOverflow时也不能find其他人。我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序 – 没有对代码，构build环境或其他任何内容进行更改。我安装了一切，像这样运行： vue init webpack test && cd test && npm install && npm run dev 看看我的源代码，我看到以下内容：这是一个混乱。为什么有三个版本的HelloWorld.vue和App.vue ？更糟糕的是，每个版本都有一个稍微不同的代码版本，没有一个匹配原始源代码。坐在根目录下的HellowWorld.vue与原始的源代码相匹配，但它在那里做什么，而不是在./src/components文件夹中？最后，为什么没有第四个App.vue有它的原始来源？据我所知，这可能与WebPack装载机有关。不过，我从来没有得到任何其他打包机的这类问题。以下是使用Browserify Vue-CLI模板完全相同步骤的示例：没有webpack:// schema，每个文件只有一个副本，这些文件实际上包含了原始的源代码（对于源地图很重要），没有意外的(webpack)/buildin或者(webpack)-hot-middleware ，没有. 子目录，….只是源代码。

使用Webpack dev服务器和PHP应用程序: 有没有人在Laravel 5+上安装webpack开发服务器（在我的情况下是5.1）？我将使用我的laravel PHP后端与ReactJS前端，我想在我的开发环境有webpack开发服务器。但我很困惑与NodeJS中的很多configuration（我专门在PHP后端）。是否可以将webpack dev服务器与PHP应用程序结合起来？我想我的env工作两种方式：在我的apache服务器（用于后端debugging/开发）和NodeJS服务器（用于前端debugging/开发）。我需要有一些中间件，解决webpack的特定端口？一般NodeJS服务器如何加载我的PHP脚本？ …或Apache Web服务器将加载页面比NodeJS将推送通知到前端？

我可以添加cookie到webpack dev服务器代理吗？: 我正在尝试在我的webpack dev服务器中设置一个代理。问题是我不控制我连接的服务器，我需要validation请求。有没有办法，我可以添加cookie到我发送到代理服务器的请求？我已经浏览了webpack dev服务器代理服务器页面，以及它链接到的node-http-proxy页面，而且我没有看到任何提及的cookie。我也不确定是否有办法让我看到这些转发的请求，所以我不知道我正在尝试什么是做任何事情。有任何想法吗？

Webpack错误 – 无法parsing文件或目录: 当npm启动我的webpack-dev-server时出现这个错误： ERROR in multi main Module not found: Error: Cannot resolve 'file' or 'directory' /var/www/html/151208-DressingAphrodite/app in /var/www/html/151208-DressingAphrodite @ multi main 这是我的webpack.config.js： var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require ('html-webpack-plugin'); const PATHS = { app: path.join (__dirname, 'app'), build : path.join (__dirname, 'build') }; module.exports = { entry : [ 'babel-polyfill', […]

我可以在没有nodejs服务器的情况下在客户端使用webpack吗？: 我试图build立一个Web应用程序，我想在亚马逊S3上存储所有的HTML，JS和CSS文件，并通过API与一个宁静的服务器通信。我试图实现延迟加载，也许路由与反应路由器。看来，webpack有这个function代码分裂，将延迟加载类似的工作。但是，我发现的所有教程和示例都涉及webpack-dev-server，它是一个小型节点快速服务器。无论如何，我可以在构build时生成包，并将所有东西上传到亚马逊S3，并实现类似于Angular的ocLazyLoading？

如何使用jade和webpack使用热重载进行HTML编码: 我是新的webpack ，试图设置简单的configuration来编码HTML / CSS与jade模板， PostCSS ， hot reload和通过webpack-dev-server提供HTML来加速编码的经验。所以我会有多个入口点，一些包含CSS，img，字体和其他资源的jade文件。任何webpackconfigurationbuild议？谢谢。我已经尝试过html-webpack-plugin ，configuration如 new HtmlWebpackPlugin({ filename:'page1.html', templateContent: function(templateParams, compilation) { var templateFile = path.join(__dirname, './src/page1.jade'); compilation.fileDependencies.push(templateFile); return jade.compileFile(templateFile)(); }, inject: true, }) 它的工作，但没有热重新加载玉包括，没有CSS / IMG /字体资产.. 然后我发现indexhtml-webpack-plugin但它似乎只适用于HTML文件，不支持模板。 EDIT1：现在，我结束了这个webpack.config.js ： var path = require('path'), webpack = require('webpack'), HtmlWebpackPlugin = require('html-webpack-plugin'), node_modules_dir = path.resolve(__dirname, 'node_modules'); module.exports […]

在Node.js中出现`window not defined'错误: 我知道Node.js中并不存在window ，但是我在客户端和服务器上都使用了React和相同的代码。任何我用来检查window存在的方法nets me：未捕获的ReferenceError：未定义窗口我如何解决这个事实，我不能做window && window.scroll(0, 0) ？