Tag: webpack

webpack lektor bootstrap scss @importpath: 我试图用lektor使用bootstrap。按照这里find的说明，一切都按预期工作。然后我用npm来安装jquery和bootstrap 。 “要求”在webpack/js/main.js jquery和bootstrap工作顺利。但是当我试图 @import "bootstrap"; 在webpack/scss/main.scss我有以下几点： ERROR in ./~/css-loader!./~/sass-loader!./scss/main.scss Module build failed: @import "bootstrap"; ^ File to import not found or unreadable: bootstrap. Parent style sheet: stdin in /home/lysdexia/Projects/thing/webpack/scss/main.scss (line 4, column 1) 这导致我在节点searchpath上看到一堆不太有用的阅读。我发现以下全部三个： @import "/home/lysdexia/Projects/thing/webpack/node_modules/bootstrap/dist/css/bootsrap.css"; @import "/bootstrap/dist/css/boostrap.css"; @import "/bootstrap.css"; 。。。都似乎导入没有错误。所有的scss例子都显示了一个简单的@import whatever; 我现在怀疑这可能是某个事物的简写，或者是一个不同configuration的假设。不幸的是，当试图用一个引导类来@extend一个类给我一个The selector ".row" […]

如何使用React + Webpack应用程序存储和访问我的API密钥？: 我目前正在与前端的React，Babel和Webpackbuild立一个项目。我需要存储和访问我的API密钥，但我不知道在哪里。我想我应该将我的API密钥存储在我的.gitignore中的.env文件中。但是，它正在访问他们，欺骗我。从我读过的东西看来，webpack可以访问yuor .env文件中的环境variables。但是，如果我这样做，是不是说当我提出要求我的API密钥将通过浏览器 – 所以密钥将不受保护？在过去，我使用了一个节点快递后端服务器，以便我的API密钥受到保护，并且与浏览器无关。但是我不确定当我有一个webpack dev服务器时是否需要这个。我开始build立一个expression后端服务器的节点，但是不知道如何将这个绑定到我的webpack.config或package.json中。 Webpack已经是一个节点快递服务器！那么我有2个服务器？有第二台服务器保护我的API密钥的唯一原因？我真的很困惑自己，我觉得不必要的复杂的事情。任何帮助将非常感激。

Webpack：如何将电子应用程序中的用户界面从业务逻辑中分离出来？: 我在Electron + Vue 2 + Webpack 2 + Bootstrap 3上开发了一个桌面应用程序。目前，所有的JS代码都被webpack捆绑在一起，并作为单个文件包含在HTML中。的index.html <body> <script src="bundle.js"></script> </body> 一切正常，但… 主要的缺点是bundle.js大小太大了。虽然，我用Webpack CommonsChunkPlugin将bundle.js拆分为app.js （我的代码）和vendor.js（第三方库），但我仍然觉得有些问题。在Electron中，不需要将所有的东西捆绑在一起，因为文件不会通过networking传输。但在另一方面，我需要Webpack来编译Vue模板。所以，我想find一种将UI与业务逻辑分开的方法： <body> <!– UI: views, controllers, etc / bundled by webpack –> <script src="app.js"></script> <script src="vendor.js"></script> <!– business logic : models, services, DAO etc / NOT bundled by webpack –> <script src="logic.js"></script> […]

解决Webpack中的本地Node模块依赖关系？: 我正在使用Webpack来连接一个与Discogs API连接的库，名为disconnect 。所有捆绑很好，直到我开始使用断开连接库的几个select方法。事实certificate，该库使用的一些模块是本地Node模块，并且该库不正式支持客户端JS环境。但是，我有一个预感，它没有做任何需要Node环境的东西; 而且我希望在放弃之前尽可能地在客户端获得。阻塞我的实验的依赖之一是一个名为querystring的本地Node模块（据我所知，与环境无关）。这个模块需要断开连接，但是没有在断开连接的package.json中列出，因为它希望在查询string本地可用的节点环境中运行。我想要做的是有Webpack绑定节点的本地查询string模块，使我的依赖关系断开可以继续使用它。对于那些想要陷入困境的人，我在浏览器中遇到的具体错误是： Uncaught TypeError：queryString.escape不是Object.getEvent（app.js：14）上的Object.collection.getReleases（collection.js：87）上Object.util.escape（util.js：38）处的函数。（app.js：47）at webpack_require （app.js：20）at app.js：40 at app.js：43 我的package.json ： { "name": "some-app", "version": "0.0.1", "description": "", "main": "src/js/app.js", "scripts": { "dev": "npm run clean && npm run build:html && npm run build:webpack-development", "pro": "npm run clean && npm run build:html && […]

webpack – 如何在非当前目录中包含js / jsx的nodejs模块: 尝试在我的jsx中包含一个npm模块。我的目录结构是这样的： app/ node_modules/ webpack.config.json package.json main.js react/ myreact1.jsx myreact2.jsx 注意：特意不要在一个package.json＆node_modules中反应/ 我已经想通了，我必须做这个webpack2configuration： resolve: { modules: ["node_modules", path.resolve(__dirname, "node_modules") } 这迫使webpack首先尝试./node_modules，然后默认为app / node_modules 然而，对于我试图包含在myreact.jsx（npm：“request”）中的模块，这个模块使用了很多本地节点库，如“fs”和“tls”等。 webpack现在给我这个错误：缩写错误： ERROR in ./~/request/lib/har.js Module not found: Error: Can't resolve 'fs' in '/myproj/app/node_modules/request/lib' @ ./~/request/lib/har.js 3:9-22 @ ./~/request/request.js @ ./~/request/index.js @ ../react/myreact1.jsx @ ./app.jsx @ ./main.js 显示错误细节版本的错误： ERROR in ./~/request/lib/har.js Module […]

Webpack可以在没有套接字问题的自定义域上本地运行: 我的设置：使用react-create-app使用代理来使用服务器API。（使用create-react-app和服务器）由于Yahoo oAuth2 API不允许在其URLcallback链接中使用localhost：****或127.0.0.1:****。在那里，我必须先创build一个Nginx代理发送localhost：3000到端口80，然后我重新路由localhost到 – > mywebsite.dev 好的，如果我使用简单的node.js服务器，这个设置工作正常：按loginbutton到雅虎（/ auth）在服务器上进行身份validation并发送到callbackURL（mywebsite.dev/callback）在同意雅虎条件后，我得到重新路由到/callback，我可以使用API就好了但是当使用create-react-app设置时，我遇到了问题。一）当启动服务器一切工作正常，我去mywebsite.dev，但后来我得到这个：我得到了错误的webpack-dev-server试图听localhost：****，因为该url是mywebsite.dev它给这个问题，我无法修复它！所以问题是如何让Webpack知道我的本地服务器在mywebsite.dev不是本地主机：****？相关：链接1 – 类似问题，链接2 – node.js自定义域名

如何在使用HtmlWebpackPlugin的正文代码之前注入bundle source？: 我正在使用谷歌地图API与webpack，要生成谷歌地图，它应该加载API文件之前加载包文件。但是HtmlWebpackPlugin把bundle文件放在body元素的底部。如何在捆绑文件之前加载捆绑包？这是我的webpack.config.js下面。 const webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server',"./public/entry.js"], output: { path: path.resolve(__dirname, 'dist'), filename: "bundle-[hash].js", publicPath: path.resolve(__dirname, '/') }, devServer: { hot: true, inline: true }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.jade$/, loader: "pug-loader"} ] […]

React项目不在Windows上运行，但在Ubuntu上运行: 我在电脑里input了一个反应过来的项目。当我尝试运行gulp命令时，它在控制台中给我一个错误。但是，当我在Ubuntu上运行它时，它工作得很好。这是我在窗口上的错误 ERROR in ./src/client/index.js Module parse failed: D:\Frontend-Master\src\client\index.js Unexpected token (64:2) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (64:2) at Parser.pp$4.raise (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExprList […]

为什么webpack的输出path需要是绝对的？: 无论何时设置Webpack，都必须指定一个绝对path作为输出。为什么这是必要的，当你的入门文件是完全正确的获取相对path？ const config = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' } }; 只是我想知道的东西。

webpack的configuration文件的节点元素是做什么的？: 一些webpack.config.js文件包含这个： node: { global: true, crypto: 'empty', process: true, module: false, clearImmediate: false, setImmediate: false } 这到底是什么？这些文档并没有太多的说法：包括polyfills或嘲笑各种节点的东西