Tag: webpack

Angular 2最终版本量angular器问题使用Webpack: 今天，我正在更新一个Angular RC 6应用程序到新发布的最终版本。一切工作正常，但是我有一个问题与量angular器。我收到以下错误： server.listen(port, opt_host, function() { TypeError: Cannot read property 'listen' of undefined 所有我从应用程序的以前版本更改的是package.json文件。我猜这是一个configuration问题，但我似乎无法find任何关于量angular器configuration的更改。另外我在这个应用程序中使用webpack – 我不知道这是否是一个有关webpack的问题。也许有人对webpack和Angular 2 Final发行版有一些问题。 protractor.conf.js 'use strict'; require('ts-node/register'); require('core-js/es6'); require('reflect-metadata'); require("zone.js/dist/zone-node"); var helpers = require('./helpers'); exports.config = { baseUrl: 'http://localhost:8080/yii/application/test_backend_mvc/branches/INT-81_RD/ng-app/dist/', // use `npm run e2e` specs: [ helpers.root('src/**/**.e2e.ts'), helpers.root('src/**/*.e2e.ts') ], exclude: [], framework: 'jasmine2', allScriptsTimeout: […]

webpack能输出单独的浏览器和节点的脚本和模块文件吗？: 我正在使用webpack来创build一个可以被浏览器加载的JavaScript对象（在一个脚本标签中），但是我也想让webpack创build一个可以被node加载的模块（它需要module.exports = ）。有没有办法让webpack做两个文件; 例如一个project.js和project.node.js ？或者我正在做这个错误的方式？ D3 JavaScript库似乎正在做这样的基于它的package.json { "main": "build/d3.node.js", "browser": "build/d3.js", … }

如何在Webpack构build和NodeJS服务器进程之间共享代码？: 我的应用程序有一个或多或less像这样的目录结构： src-program/ – 包含前端代码，包括package.json和webpack.config.js src-server/ – 包含后端代码，包括不同的package.json和.babelrc shared/foo.js – 是前端和后端都需要的JavaScript代码所有代码都使用ES2015语法，因此使用Babel进行转码。对于前端，在Webpack构build期间通过使用babel-loader来完成“转译”。对于后端，它由babel-register实时完成。 shared/foo.js需要其他模块，这些模块位于前端和后端的package.json文件中。由于NodeJS / Webpackparsing模块的方式，共享模块找不到正常。对于Webpack，我使用这个configuration来解决这个问题： resolve: { root: __dirname, fallback: [ __dirname + "/../shared", __dirname + "/node_modules" ], extensions: ['', '.js', '.jsx'] }, 第一个fallback确保“共享”模块已解决，第二个fallback确保共享模块所需的模块仍然parsing到前端node_modules目录。这允许包含共享模块像这样简单： import * as foo from 'foo'; 但是，我很难让后端（即NodeJS）以相同的方式parsing共享模块。我尝试了使用foo.jsparsing的app-module-path ，但是这个文件不是由Babel处理的，或者像transform-runtime （ foo.js 间接需要的）的其他Babel模块不能被parsing，因为它们驻留在src-server/node_modules … 我可以通过预先编译代码来解决这个问题，而不是使用babe-register但是不pipe怎样，这一切都感觉不对。那么， […]

如何处理与webpack服务器端的静态资产？: 我试图创build一个通用的反应应用程序（在服务器和客户端上使用webpack），并与图像导入斗争。我想写这个： import someImage from './someImage.png' const SomeImage = () => <img src={someImage}/> 这是我的webpackconfiguration文件： var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://127.0.0.1:8080/', 'webpack/hot/only-dev-server', './client', 'babel-polyfill' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { modulesDirectories: ['node_modules', 'shared'], extensions: ['', '.js', '.jsx'] }, module: […]

热模块重新加载是使初始页面请求10-20s，与Webpack，Koa，Vue.js: 出于某种原因，大多数页面刷新重新请求bundle.js文件，它需要大约10-15-20秒从本地主机下载。这一切都来自localhost，bundle.js文件大小约为1mb。这个文件的请求似乎只是爬行，一次加载几千字节。一些观察：经过一番挖掘，似乎在从__webpack_hmr到服务器的初始调用中停顿，但是我不确定在调用bundle.js之后发生了这个调用。以下是服务器请求stream的日志。在只有一个或两个组件的页面上，除了主页以外的任何东西。这暗示着它可能与热模块重装有关。与其他页面一样，首页仍然会花费5秒以上（有时10-20），但如果使用Ctrl + R刷新页面，则会立即返回。如果我进行地址栏刷新，则需要更长的时间。其他页面仍然需要一样长的时间，无论我按Ctrl + R或做一个地址栏重新加载… 更新：我删除了热门的模块replace，而且它似乎是问题的来源，因为没有它的网页加载即时。请求日志： – 响应时间GET / = 609ms – > GET / 200 647ms 2.55kb < – GET /main.aafc9fb7f6a0c7f127edb04734d29547.css – > GET /main.aafc9fb7f6a0c7f127edb04734d29547.css 200 17ms 3.43kb < – /bundle.js – > GET /bundle.js 200 18ms 1.29mb < – GET […]

NodeJS，Webpack，意外的标记<: 我是networking开发新手，刚刚完成我的第一个使用Webpack和React的辅助项目。我试图通过创build自己的NodeJS服务器而不是使用Webpack-dev-server从项目中使用的开发环境转移到生产环境。这是我的代码： webpack.production.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }) var config = { devtool: 'source-map', entry: './app/index.js', output: { path: __dirname + '/dist', filename: "index_bundle.js", publicPath: __dirname + '/dist' }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}, {test: […]

Webpack多页面应用程序服务: 我有一个反应项目，但我分成两部分（pipe理员，前）。我想通过一个webpack devserver服务这两个不同的端口。当我运行“npm run start”时，可能会有两个部分在不同的端口工作我用webpackbuild立，输出在dist目录里 admin.html 的index.html admin.js index.js common.js 如果我打开本地主机：8081 – >必须返回index.html（包括index.js和common.js）如果我打开本地主机：8082 – >必须返回admin.html（包括admin.js，common.js） webpackconfiguration： entry: options.production ? { interview: ["./app/src/pages/interview/main.js"], admin: ["./app/src/pages/dashboard/main.js"] } : { interview: [ 'webpack-dev-server/client?http://' + options.ip + ':8081', "./app/src/pages/interview/main.js", 'webpack/hot/only-dev-server'], admin: ['webpack-dev-server/client?http://' + options.ip + ':8082', 'webpack/hot/only-dev-server', "./app/src/pages/dashboard/main.js"] }, output: { path: options.production ? './dist' : […]

webpack dev server：TypeError：标题内容包含无效字符: 我有一个webpack应用程序，我正在开发模式下使用webpack开发服务器来运行应用程序。我也使用代理将我的请求代理到现场环境。该应用程序以前运行使用节点v4.3.2没有问题，应用程序运行正常，代理正确。我今天升级节点到版本7.0.0，所以我可以增加对es6的支持。现在运行应用程序时，我收到了以下所有请求的错误： webpack: bundle is now VALID. _http_outgoing.js:360 throw new TypeError('The header content contains invalid characters'); ^ TypeError: The header content contains invalid characters at ServerResponse.setHeader (_http_outgoing.js:360:11) at /home/jason/dev/frontend-tsm-holiday-results/node_modules/http- proxy/lib/http-proxy/passes/web-outgoing.js:96:13 at Array.forEach (native) at Array.writeHeaders (/home/jason/dev/frontend-tsm-holiday-results/node_modules/http-proxy/lib/http-proxy/passes/web-outgoing.js:90:35) at ClientRequest.<anonymous> (/home/jason/dev/frontend-tsm-holiday-results/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:157:20) at emitOne (events.js:96:13) at ClientRequest.emit (events.js:188:7) at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:473:21) at HTTPParser.parserOnHeadersComplete […]

gulp-nodemon onChange事件触发两次: 我试图按顺序设置我的项目的吞咽任务，以及我的gulpfile.js代码目前的样子： var gulp = require('gulp'), nodemon = require('gulp-nodemon'), webpack = require('gulp-webpack'); gulp.task('nodemon', ['webpack'], function(){ console.log('NODEMON'); return nodemon({ script: 'server/server.js', ext: 'js', ignore: [ 'client/game.js' ], tasks: function(changedFiles){ var tasks = ['webpack']; changedFiles.forEach(function(file){ console.log('changed file: ' + file); }); return tasks; }, env: { 'NODE_ENV': 'development' } }); }); gulp.task('webpack', function(){ console.log('WEBPACK'); return gulp.src('src/main.js') .pipe(webpack({ entry: […]

节点模块的require.context不适用于链接的包: 我创build了一个插件的网站。每个插件都遵循特定的名称标准和合同。在我的main.js中，我按照标准名称“dynamic”加载所有包： const context = require.context("../../node_modules", true, /plugin\-\w+\/dist\/(index\.js|styles\.css)$/) 这需要遍历整个node_modules文件夹，并加载名为“plugin-X”的所有模块。从这些模块中，它寻找“dist / index.js”和“dist / styles.css”。那些后来得到导入： context.keys().forEach(path => {/* do stuff */ }) 只要软件包是使用npm install path / to / tgz安装的，就可以工作得非常好。然而这并没有带来愉快的发展经验。所以在我的插件X文件夹中使用“npm链接”，在我的网站上我使用“npm链接插件-X”。当我现在启动webpack时，整个事情在创build15K文件句柄后爆炸。如果我删除“plugin-X”中的node_modules文件夹，它将起作用。不过，我需要node_modulesbuild设babel和其他的东西，以识别src文件夹中的更改重build，并将新脚本放入dist文件夹。有什么办法可以做到这一点？或者，也许另一个选项，我错过了我的研究如何做到这一点？问候