Articles of webpack

在使用中使用Angular 4中的node_module(网站刮板)失败

目前我正在尝试将node_module“网站刮板”[1]添加到我的Angular 4项目中。 我通过“npm install website-scraper -save”下载安装模块。 在我的组件我导入模块“导入*作为刮刀从'网站刮板'”。 到目前为止,所有东西都按预期编译 如果我现在只是添加“console.log(Scraper)”在我的组件的某处,我得到警告[3],我的浏览器抛出错误[2] 有人可以启发我,出了什么事? 我使用节点8.9.0和npm 5.5.1。 无论如何,我尝试多个furhter(旧)版本的节点和npm导致相同的行为。 任何帮助表示赞赏。 提前致谢。 [1] https://www.npmjs.com/package/website-scraper [2] graceful-fs.js:166 Uncaught TypeError: Cannot read property 'prototype' of undefined at patch (graceful-fs.js:166) at Object.eval (graceful-fs.js:27) at eval (graceful-fs.js:262) at Object…/../../../graceful-fs/graceful-fs.js (vendor.bundle.js:884) at __webpack_require__ (inline.bundle.js:55) at eval (index.js:4) at Object…/../../../fs-extra/lib/fs/index.js (vendor.bundle.js:726) at __webpack_require__ (inline.bundle.js:55) at eval (index.js:8) at […]

在创build反应应用程序项目上进行快速身份validation

我正在开发一个带有Express后端的简单项目和一个使用create-react-app引导的前端: my-project |- server.js # backend entry point |- client/ |– package.json # client package.json |– index.js # client entry point 遵循一些指导( 如这样 ),我现在有一个localhost:3001上的后端服务工作,并且在localhost:3000上有一个工作的前端服务。 所有对/api/myapi的API调用都通过代理服务器成功redirect到端口3001。 在我的客户端package.json中: "proxy": "http://localhost:3001/", 现在,一切工作正常,但我有困难的时间使login工作。 事实上,当他访问/login url时,我无法将用户redirect到login页面。 在我的server.js文件里面: app.get('/login', function(req, res) { res.send('This is the login page'); }); 这是根本不工作,而URL /login给我一个空白页,而不是(它看起来不是在端口3001)。 由于这是我第一次使用Express,所以有人可以这样解释我为什么不工作?

将Webpack添加到现有的React应用程序

所以我使用create-react-app构build了第一个应用create-react-app 。 它默认使用npmbuild设,本地运行等… 我想要做的是转移到使用Webpack,但不打破现有的设置,并做了一些谷歌search,但没有开始,一步一步地走,所以我可以更好地感受它正在做什么,去哪里。 也希望也使用webpack-dev-server合并。 这就是说,我希望你们有一些build议,也许还指出了一些很好的教程,为这个前进? 非常感谢。

nodejs / npm / webpack:将依赖项添加为“file:/ some / path”不起作用

在/ project-a中 ,我有一个微小的默认导出类,我已经构build,转换并成功输出到/ dist文件夹中。 因此该项目的package.json的“main”条目是“./dist/index.js”。 我想在发布到npm之前尝试一下(我是新手)。 在/ project-b中 ,我更新了package.json中的依赖关系: "dependencies": { … "project-a": "file:C:\\foo\\bar\\project-a" } 而我呢: import MyClass from 'project-a'; 在使用webpack构build时,我遇到了以下错误: 找不到模块:错误:无法parsing'C:\ webpack \ configfile \ entry \ point'中的'project-a' 所以基本上,我的package.json中的依赖的path被完全忽略! 为什么? 我究竟做错了什么?

Webpack从节点模块自动导入css

TL; DR:有没有什么办法可以从我们的node_modules文件夹中自动扫描或自动导入我们的networking包使用的所有样式表? 我正在使用angularJS作为其MVC框架的项目,我们正在进行迁移到使用webpack的过程。 我目前写了以下configuration: const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const bbProperties = require('./webpack.properties'); const appRoot = __dirname + "/../../.."; console.log('__dirname:', __dirname); module.exports = { entry: { app: appRoot + bbProperties.app.entryScript, login: appRoot + bbProperties.login.entryScript }, output: { path: appRoot + bbProperties.distFolder, publicPath: "dist", filename: "js/[name].bundle.js", }, module: { […]

Webpack,(npm)绑定,并且要求(`fs`)不能一起工作

目前正在使用一个用于通过odbc INSERT语句向SQL数据库提交用户信息的SPA,但是我的本地环境没有正确构build,我无法弄清楚为什么。 链接到npm的绑定: https ://www.npmjs.com/package/bindings macOS version 10.12.6 node -v v8.8.1 webpack -v 3.8.1 截至目前,我可以使用node post.js成功地发布到我的数据库。 但是,当我运行grunt build我收到以下错误: WARNING in ./node_modules/bindings/bindings.js 81:22-40 Critical dependency: the request of a dependency is an expression WARNING in ./node_modules/bindings/bindings.js 81:43-53 Critical dependency: the request of a dependency is an expression ERROR in ./node_modules/bindings/bindings.js Module not found: Error: Can't resolve […]

使用webpack和node.js运行Heroku

首先是上下文,这是我的文件结构: bundle.js package.json package-lock.json .gitignore /.git /node_modules /src form.js form.css index.html json.js 这是我的package.json : { "name": "transcriber-form-helper", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node node_modules/webpack/bin/webpack.js ./src/form.js bundle.js" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.2.1" }, "devDependencies": { "css-loader": "^0.28.7", "style-loader": "^0.19.0", […]

Webpack不会重新加载页面

npm run dev工作正常,但它不会重新加载页面进行更改时。 我也尝试使用localhost:8080/webpack-dev-server/index.html并且页面不再刷新。 我完全是NodeJS的新手,完全不知道如何解决这个问题。 我花了几个小时尝试不同的事情,因为这很困难,我差点stream泪。 文件夹结构: Project – node_modules – src – js – components – pages – client.min.js – index.html – package.json – package-lock.json – webpack.config.js 的package.json: { "name": "react-tutorials", "version": "0.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.0", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-html-attrs": "^2.0.0", "babel-plugin-transform-class-properties": "^6.3.13", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.3.13", "babel-preset-react": […]

React没有导出的成员LinkHTMLAttributes

我正在使用vs2017,npm和webpack构build一个反应的应用程序。 由于在我的标题中描述的错误,我无法获得vs构build我的解决scheme: 错误TS2694 Build:Namespace'React'没有导出的成员'LinkHTMLAttributes'。 SpyStore.React C:\ Work \ Development \ React \ Spystore \ SpyStore.React \ SpyStore.React \ node_modules \ @types \ react-router \ lib \ Link.d.ts 10 Js文件:\ node_modules \ @types \ react-router \ lib \ Link.d.ts import * as React from 'react'; import Router from './Router'; declare const Link: Link; type Link = […]

Webpack中包含多个供应商包的多个入口点

我有几个“单页应用程序”,需要在一个总体应用程序中并行运行。 为此,我使用webpack来触发jsx和scss的转换,捆绑生成的css和js,拆分由我们编写的应用程序代码和来自第三方来源的应用程序代码。 不幸的是,似乎webpack对于如何捆绑供应商文件非常有见地 – 它想要为我所有的入口点创build一个大的供应商捆绑包,而不是像这样更合理的拆分: – app1 – app1.bundle.js – app1.vendor.bundle.js – app1.bundle.css – app2 – app2.bundle.js – app2.vendor.bundle.js – app2.bundle.css 我特别不希望遇到这样的情况:我将一些大的(如JQuery)库导入到应用程序2中,并将其包含在不需要它的其他应用程序的供应商捆绑包中。 我们的许多页面使用完全不同的前端堆栈,如果我使用整个Web应用程序的单个vendor.js文件,我可以很快看到这种膨胀失控。 我还希望自动完成 – webpack应该能够扫描我的入口点,检测哪些第三方库(可能通过引用节点模块?)正在导入,只包括供应商文件中的该应用程序。 我不想在我的webpackconfiguration中添加第三方依赖到一个数组中,并在我的入口点require()它们。 这似乎很多余。 我没关系的app1.vendor.bundle.js和app2.vendor.bundle.js有重叠(即,如果他们都导入React,他们都可以包括在他们单独的捆绑代码)。 我认为这比pipe理在我网站上运行的部分应用程序共享的通用文件要容易得多。 有没有什么办法可以自己在webpack中实现,或者我将不得不写一些自定义的解决scheme来包装它呢? 我见过的所有例子都有人为整个应用程序编译一个全面的供应商包。