Articles of webpack

Webpack:如何让具有相同模块名称的运行时(不是buildtime)function标志?

我希望find一种方法来从相同的webpack运行和相同的输出url可用的同一个文件的替代版本,一个服务调用之后dynamic加载不同的块/ bundle确定用户属于哪个组。 背景: 在相同的构build和输出url中将alpha / beta更改投入生产,可以让我们开发和testing外部用户的function,但是需要改变的任何地方(以及后来删除它们)的条件都很容易出错,并且会生成更复杂的代码。 我的想法是有相同的文件在特殊的命名的子集的替代版本 – 例如foo / file.js和foo / flagged – special / file.js – 然后当某些东西从'foo / file'中导入blah时,它会自动为该用户获取正确的版本。 这避免了代码本身的条件,并为所有人提供了一个function,只是用备用代码覆盖基本文件。 它也不涉及我们现有的代码库和webpackconfiguration的巨大变化,也没有涉及到很多时髦和产品特定的语法来replace我们的所有导入语句。 (当我把这个想法集中在一起后,有人把我指向孟德尔,尽pipe他们自己的框架与webpack不友好,但是我认为基本的想法并不是疯狂的) 问题: 我看到function的例子 – 标记一个版本或另一个版本,但不是在一个版本中都有的两个例子。 我可以写一个自定义的加载器或插件来包装每个文件加载来做到这一点(我想 – 不知道webpack的输出如何在运行时评估方面工作),但这会导致添加两个版本的捆绑。 我想我可以创build一个基本输出块只是获取用户的选项,然后dynamic加载具有不同版本的两个备用块之一…但我不知道这是否会工作,或者如果我正在与networking内部的战争打一场不败的战争。 这可以工作吗? 有人已经做了这个? 有没有更好的办法? 提前致谢!

如何从外部导入webpack条目文件的默认导出?

我想我最好用代码来解释它。 我在webpack中有一个文件,如下所示: import ReactDOMServer from 'react-dom/server'; import Server from './server'; import templateFn from './template'; export default (req, res) => { const reactString = ReactDOMServer.renderToString(<Server />); const template = templateFn(html); res.send(template); }; 我也有一个明确的应用程序,我想要访问默认的导出function。 如果有什么区别,这个文件就是webpack的入口文件。 这是我在我的快速应用程序中尝试的: const handleRequest = require(path.resolve(webpackConfig.output.path, webpackConfig.output.filename)); app.get('*', (req, res) => { console.log(handleRequest); }); 我试图导入webpack生成的文件,希望能够访问条目文件的默认导出。 那么,我错了,因为导入的输出是{} 。 有一个webpack插件或某种技术来做我想要build立的? 我不希望快速应用程序成为webpack构build的一部分。 这是我以这种方式分离代码的主要原因。

npm安装webpack –save-dev错误

我下载了一个演示“react-redux-demo”,当我使用commond“npm install webpack –save-dev”安装webpack时,显示错误。 这是日志 8351 verbose unlock done using C:\Users\user\AppData\Roaming\npm-cache\_locks\staging-51622fc2de18aa59.lock for D:\work\test\react-redux-demo\node_modules\.staging 8352 warn The package history is included as both a dev and production dependency. 8353 warn The package react is included as both a dev and production dependency. 8354 warn The package react-router-config is included as both a dev and production dependency. […]

NodeJS / express:开始运行一段时间后服务器被挂起

我用express和webpack做了我的服务,一开始它运行良好。 奇怪的是,一段时间后,服务(服务器)将挂起。 如屏幕截图所示,没有收到消息代码。 (服务器消息截图)而这种情况一再发生。 我的app.js var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var index = require('./routes/index'); var users = require('./routes/users'); var app = express(); var mysql = require('mysql'); var generals = require('./routes/generals'); // view engine setup app.set('views', path.join(__dirname, […]

使用webpack目标节点从node_modules导入css

我目前正在build立一个服务器端渲染反应的应用程序。 我正在使用一些与CSS文件来的库。 当我尝试像这样导入它们时: import 'leaflet/dist/leaflet.css'; 我在我的server.js得到以下错误: /my/app/path/node_modules/leaflet/dist/leaflet.css:3 .leaflet-pane, ^ SyntaxError: Unexpected token . at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object.__webpack_exports__.a (/my/app/path/server.js:725:18) 导入 import '../../node_modules/leaflet/dist/leaflet.css'; 作品。 有没有办法configurationwebpack,我可以正常导入这些css文件? 这里是server.js的webpackconfiguration: const nodeExternals = require('webpack-node-externals'); const postcssImport […]

在Amazon EC2空白页问题上部署Rails + React应用程序

我有轨道5 + react.js的组合应用程序。 我已经在Amazon EC2服务器上部署了它。 应用程序设置完成。 到现在为止没有错误。 问题是“变得空白页” 。 内容不在屏幕上呈现。 节点模块已经安装在服务器上。 来自我的package.json文件的代码 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpack": "./node_modules/.bin/webpack –watch", "heroku-postbuild": "webpack –config webpack.config.prod.js" } 告诉我发生了什么事

Webpack正在编译不需要的模块

我有一个与webpack编译的Node.js应用程序。 编译我的应用程序并运行后,我得到以下错误: Error: Cannot find module 'oracledb' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at t.(anonymous function).i (C:\Users\xxx\Documents\xxx\web-test-nodejs\dist\api\bundled.js:1:400) at Object.<anonymous> (C:\Users\xxx\Documents\xxx\web-test-nodejs\dist\api\bundled.js:1:1982) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\xxx\Documents\xxx\web-test-nodejs\index.js:19:14) at Module._compile (module.js:570:32) at Object.Module._extensions..js […]

Angular 4通用Node.js server.js错误

我正在构build一个Angular 4 CLI应用程序,并尝试使用新内置的Universal进行SSR。 所有似乎工作正常,直到我尝试运行节点server.js 下面的错误被返回: var crypto = require('crypto'); ^ TypeError: require is not a function at Object.webpackEmptyContext.keys (/dist-server/server.js:156480:14) at __webpack_require__ (/dist-server/server.js:20:30) at Object.<anonymous> (/dist-server/server.js:156469:20) at __webpack_require__ (/dist-server/server.js:20:30) at Object.module.exports.raw (/dist-server/server.js:42461:18) at __webpack_require__ (/dist-server/server.js:20:30) at Object.<anonymous> (/dist-server/server.js:42340:15) at __webpack_require__ (/dist-server/server.js:20:30) at Object.<anonymous> (/dist-server/server.js:77201:22) at __webpack_require__ (/dist-server/server.js:20:30) 任何angular4普遍专家在那里?

如何在angular2 / 4中使用flag-icon-css?

我想用angular2 / 4来使用flag-icon-css。 我使用npm install flag-icon-css设置了flag-icon-css,并在webpack样式中添加了./node_modules/flag-icon-css/flag-icon.min.css。 看npm开始输出,它看起来像所有的svg文件被重命名: ad.a58027d893be40137b4e.svg 55.6 kB [emitted] ae.9df491b1067fe429b98a.svg 273 bytes [emitted] af.66d30d603494af84757f.svg 33.6 kB [emitted] ag.0c113ee43f5e979f9e2b.svg 862 bytes [emitted] ai.d6af3a0faf03775fead4.svg 58.2 kB [emitted] al.7e21b4962e704ec70f96.svg 4.91 kB [emitted] am.15d9b1b398267457715f.svg 242 bytes [emitted] ao.ea04172c141ba985f772.svg 2.25 kB [emitted] aq.2c772185d13c70791c11.svg 4.61 kB [emitted] ar.738ab0020d69c00a1d1b.svg 4.56 kB [emitted] as.5d5e432322a2db51180a.svg 11.5 kB [emitted] ….. 我想这就是为什么我看不到旗帜?

用两个configuration创build一个webpack.config,但插件相同

我正在开发一个基于vue.js的项目,在那里我将有一个用于pipe理仪表板的SPA和一个公共端的SPA。 我想单独处理这些项目,但是同时build立它们。 (或者这将是很好的东西,如:运行生成 – 公共或–admin(指定要build立哪一个)) 我创build了一个configuration数组,并使用此设置创build输出,但由于某种原因,它不会缩小。 它只有一个configuration。 我试图把插件像插件分开configuration:[..]但没有成功。 webpack.config.js: var path = require('path')var webpack = require('webpack') module.exports = [ { entry: { public : './resources/js/public-spa/main.js', }, output: { path: path.resolve(__dirname, './public/public-spa/dist/'), filename: '[name].build.js', chunkFilename: "public.[name].chunk.js" }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } } […]