Tag: webpack

使用Webpack中为客户端定义的别名反应呈现，但有问题

使用Webpack中定义的Alias为客户端反应呈现，但是当尝试在使用Express的Node服务器上呈现问题时。 我已经在webpack例子中定义了一些别名 resolve: { extensions: ['', '.js', '.jsx', '.cjsx', '.coffee', '.json'], alias: { pages: path.join(__dirname, 'js/MGPages.js'), } }, 但是当需要我在节点服务器上的主要应用程序文件时，我得到以下错误 Error: Cannot find module 'pages' 客户端别名工作正常，但我怎么能在节点服务器端解决这个问题。 我不想在客户端的反应组件上更改导入文件的代码。

Webpack /如何在开发模式下捆绑JS文件？

基本上，默认情况下，webpack的要点是将每个parsing的JS文件捆绑到一个bundle.js 。 在开发模式下，我想分别访问每个JS。 我不希望他们被捆绑在一个文件中。 有没有办法阻止bundle.js在dev模式下将文件连接到bundle.js ？ 我希望看到A.js ， B.js ， C.js当我在开发模式下打开页面的源代码，而不是收集它们的bundle.js 。

Hexo（以及其他静态站点生成器）前端依赖性pipe理工作stream程

是否有推荐的工作stream程来pipe理前端依赖项？ 我一直在阅读很多文章，推荐离开Bower，然后到像Webpack这样的npm-only解决scheme，但是webpack是一个全新的范例（通过一个js文件加载js，scss，字体等），默认情况下，要求js在浏览器中运行，以便加载css。 我想要一个静态网站的部分原因是，对于最终用户，js不是强制性的。 然而，我真的厌倦了bower-installing的东西，然后不得不托pipe一切在bower_components中，针对特定的文件名（js，css，img）包含在输出中，或者将他们的css / img依赖关系转移到我自己的repo中。 更不用说，依靠两个登记处是不太理想的。 Hexo是否有推荐的方法，或者有没有人有如何做到这一点的意见？ 在webpack-dev-server的独立terminal中运行一个Hexo服务器似乎很痛苦和尴尬，并且可能会造成一些混淆，因为哪个库应该处理哪些文件。 其他工具更适合静态站点生成器的开发/构build过程中的依赖关系pipe理吗？

Babel / Node / Relay / Webpackcaching？

通常： 这四个系统有caching吗？ 如果是这样，清除每个方法是什么？ 特别： 遇到了我们正在开发的反应应用程序的问题。 在本地开发时，我们看起来偶尔会遇到以下错误： “Invariant Violation：RelayQL：在运行时发生意外的调用，或者Babel变换没有设置，或者它没有识别这个调用站点，确保它被逐字地用作`Relay.QL`。 我没有注意到为什么/何时开始发生的任何特定的原因。 我终于find了一个黑客解决scheme，涉及到我参考引用的组件文件（进一步在错误味精，未显示），并删除里面的RelayQL片段 export default Relay.createContainer(PinterestShare, { fragments: { resource: () => Relay.QL` fragment on Resource { id title files { type images { medium { url width } } } } ` } }); 至 export default Relay.createContainer(PinterestShare, { fragments: { resource: () => Relay.QL` ` } […]

在写入磁盘之前，如何将一个webpack版本的输出捕获为一个string？

在webpack中似乎没有output选项将输出作为string写入到nodejs Buffer或stdout 。 谷歌search没有前途。 这是可能的，通过configuration或第三方模块？

如何使Webpack和Node一起工作？

我打算在前端使用ES6模块，所以我在Webpack上进行了实验。 但是，我正在努力工作 客户端发生变化时重新加载热插拔 在服务器端发生变化时重新加载（在使用nodemon .之前，我正在使用nodemon .并且没有问题） 在terminal上丢失debug / console.log信息，因为它正在打印webpack状态，而在服务器上没有任何东西，比如我的自定义“服务器正在运行….”日志。 下面的设置我试图通过npm start运行。 每次我做任何改变，我都必须再次运行npm start 的package.json { "name": "socket-io-chat", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "start": "npm run build", "build": "webpack -d && webpack-dev-server –hot –inline –watch && node –watch", "build:prod": "webpack -p && webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": { "cors": "^2.7.1", "express": […]

Webpack ContextReplacementPlugin从node_modules获取包

我们正在尝试构build一个webpack包，它将在一个包中包含我们所有的依赖关系。 有一个特定的包，它具有来自node_modules的dynamic需求，webpack无法在编译时正确parsing包。 生成错误的代码是：// config.middlewares是node_modules中的一个包列表Object.keys（config.middlewares）.forEach（function（moduleName）{var pkg = require（moduleName）var alias = config.middlewares [ moduleName]头盔[别名] = pkg}） Webpack将它编译成： Object.keys(config.middlewares).forEach(function (moduleName) { var pkg = !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()) var alias = config.middlewares[moduleName] helmet[alias] = pkg }) 所以我们尝试使用Webpack的ContextReplacementPlugin，但是无论我们尝试过什么，我们都无法将其configuration为更改上下文以从node_modules中获取文件。 我们尝试过的一些东西（我们首先试图得到一个特定的包，叫hsts）： new ContextReplacementPlugin(/helmet.*/, /\.\.\/hsts/) new ContextReplacementPlugin(/helmet.*/, /\.\/\.\.\/hsts/) new […]

使用react-hot-loader 3与自己的服务器

我能够设置react-hot-loader来正确地绑定我的客户端js，并将更改推送到浏览器并在那里应用（除了[react-router] You cannot change <Router routes>; it will be ignored警告）。 我使用自己的服务器与koa ， koa-webpack-dev-middleware和koa-webpack-hot-middleware ，处理webpack和hot。 它也处理我的应用程序与此代码的服务器呈现 export default function *renderReact() { const history = createMemoryHistory(); const store = makeStore(history); const [redirectLocation, renderProps] = yield match.bind(null, { routes, location: this.url, history }); if (redirectLocation) { return this.redirect(redirectLocation.pathname + redirectLocation.search) } if (renderProps == null) { return this.throw(404, […]

Angular 2，Webpack，Express，HMR

我正在使用Webpack和HMR开发我的Angular 2应用程序。 在这个阶段有一个静态的应用程序，不与后端交互。 所有数据都是静态的虚拟数据。 我已经到了开始添加express / node后端的时候了，所以我可以和数据库进行交互，但是我不想失去HMR的function。 是否可以这样设置： 我可以使用express和jade来从Node服务Angular 2应用程序。 我对Angular 2应用程序进行了更改，HMR启动并将代码热插入浏览器窗口。 目前我的webpack安装被分成三个文件（dev，prod，common）。 我在下面的开发和通用文件，因为他们是最相关的。 启动命令 webpack-dashboard — webpack-dev-server –inline –hot –progress –port 8080 webpack.dev.js var webpackMerge = require('webpack-merge'); var commonConfig = require('./webpack.common.js'); var helpers = require('./helpers'); module.exports = webpackMerge(commonConfig, { devtool: 'cheap-module-eval-source-map', output: { path: helpers.root('dist'), publicPath: 'http://localhost:8080/', filename: '[name].js', chunkFilename: '[id].chunk.js' }, devServer: { […]

将后端生成的数据作为一个webpack模块传递

我正在使用ExpressJS作为后端服务器和webpack使用grunt构buildSPA网站。 但是我想传递一些快速会话的数据作为一个模块，可以在我的app.js中加载 app.js （clinet） var userData = require("userData"); server.js （服务器） app.get("/test", function(req, res, next){ res.render('view', {}); }); view.pug html head script(src="app.js") script. // I want to pass this var sessionData = {name: "name", id: 123}; // how to use webpackJsonp to define sessionData as userData module? 我不想从app.js获取额外的HTTP请求来获取用户数据。 我知道分离的块使用webpackJsonp来定义模块，但如何定义这个“ dynamic生成的模块 ”？