Tag: webpack

用脚本src链接安装Vuel.js有什么缺点？

我是编程新手，我学会了如何使用laravel和vuejs（现在在laravel 5.3中一起发布）。 我现在只练习Vuejs，想知道使用简单的src链接来安装Vuejs是什么错误，而不是用npm和node.js来安装复杂的方式，这对我来说是另一个学习曲线，如果我必须无论如何，学习它的道路。 感谢您的回答，我只是不明白什么是一个Vue.js安装简单的缩小src链接可能是错误的。

未满足的WebPack对等关系问题

所以我有一个奇怪的问题，我试图做一个npm安装在我发现github上的反应/ redux样板解决scheme，但是我得到一些未满足的同行依赖问题。 但是，超级奇怪的是，我读的方式，这些都不是一个问题…我错过了什么？ npm ERR! node v4.4.5 npm ERR! npm v2.15.5 npm ERR! code EPEERINVALID npm ERR! peerinvalid The package webpack@2.1.0-beta.21 does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer babel-loader@6.2.5 wants webpack@1 || ^2.1.0-beta npm ERR! peerinvalid Peer extract-text-webpack-plugin@2.0.0-beta.3 wants webpack@^2.1.0-beta npm ERR! peerinvalid Peer sass-loader@4.0.1 wants webpack@^1.12.6 || ^2.1.0-beta npm ERR! […]

在哪里放置前端JavaScript文件？

我正在开发一个基于快速的Web应用程序，并开始关注由express-generator构build的应用程序框架。 接下来，我添加到我的项目webpack捆绑客户端资产。 现在我不确定在哪里放置前端JavaScript文件，如果在/src或/app文件夹中？ 实际上，我处在app.js ， /lib ， /src和/app文件夹之间。 根据快速生成器 ，它创build一个app.js文件作为主要条目，因此看起来有点奇怪有一个app文件夹与入口点app.js相同的名称。 webpack使用手册build议一个/src文件夹放置JavaScript文件。 但是我认为/src不应该是专门用于前端JavaScript的，另一方面，我不想将服务器和前端JavaScript文件混合在同一个文件夹中。 此外， 对于Node.js项目的问题文件夹结构的接受的答案与前面的点相矛盾，因为它指出： / src包含所有服务器端特定的CoffeeScript文件 所以，我认为可能/src并不是放置前端javscript文件的更好select，根据问题的接受的答案Node.js文件和文件夹的项目命名约定我会遵循提议的结构： /app – front-end javascript files /bin – helper scripts /lib – back-end express files 但是，有一个文件夹/app和一个文件app.js具有相同的名称是可以的吗？ 此外， /app与前端和app.js与后端相关。

Webpack2 Hot Module重新加载Express.js Universal React应用程序

通用应用程序的webpackconfiguration通常是一个configuration对象的数组，如： module.exports = [ { name: 'client', entry: { app: […require("./loaders").hotLoaders, "./src/frontend/client"], libs: [ 'react', 'react-dom' ] }, output: { path: path.join(__dirname, "../../www"), filename: "js/[name].bundle.js" }, … }, { name: 'server', target: 'node', entry: { server: ["./src/universal/server"], express: ["./src/universal/express"] }, output: { path: path.join(__dirname, "../../www"), filename: "js/[name].bundle.js" } … }]; 在运行webpack –config build/webpack/prod.js ，我可以在生产环境中执行以下操作，只需运行server.express块的输出，如node www/express.bundle.js […]

Webpack以某种方式完全绕过Express路由

我从这个优秀的教程开始： https ： //www.fullstackreact.com/articles/using-create-react-app-with-a-server/，并试图通过添加一个新的页面来扩展它通过一个新的路线。 然而，经过几个小时的忙碌，我意识到不知何故，创造反应应用程序正在做一些奇怪的魔术（正如他们的文档中提到的 ）： `create-react-app` configures a Webpack development server to run on `localhost:3000`. This development server will bundle all static assets located under `client/src/`. All requests to `localhost:3000` will serve `client/index.html` which will include Webpack's `bundle.js`. 关键引用是“所有请求localhost:3000将服务client/index.html ”。 我不知道这是怎么发生的。 所以，即使我乱了routes/index.js ： app.route('/') .get(function (req, res) { res.sendFile(bipath.join(__dirname, '../public', 'THISCANBEANYRANDOMFILENAME.html')) }); 它并不重要，因为webpack是以某种方式指导localhost:3000无论如何index.html。 在哪里以及如何做到这一点？ […]

使用webpack-dev-server运行节点应用程序时设置环境variables？

在我的节点应用程序中，我试图区分开发版本的应用程序和生产版本。 当我运行webpack-dev-server时，我使用下面的命令： NODE_ENV =开发webpack-dev-server –inline –hot –content-base ./public 在我的应用程序中，我尝试使用process.env.NODE_ENV读取NODE_ENV中的内容，但似乎为空。 这是不是使用webpack-dev-server设置环境variables的正确方法？ 编辑：这是在我的React应用程序。 我使用Express来为生产中的应用程序提供服务，但是我只是使用webpack-dev-server来进行开发。

将库导入到没有NPM的Angular2 / WebPack项目中

我对Angular2和WebPack是完全陌生的，并且正在为可能非常简单的事情而苦苦挣扎。 我们正在尝试将yFiles for HTML合并到Agular2 / WebPack项目中。 我在@types/yfiles上find并在NPM上导入了types文件。 库的其余部分只能从供应商处获得，而不能在NPM上获得。 这编译正确，但是当我debugging项目时，控制台报告错误： EXCEPTION：未捕获（承诺）：错误：./HomeComponent类中的错误HomeComponent – 内联模板：0：0由：未定义的yfiles 错误：./HomeComponent类中的错误HomeComponent – 内嵌模板：0：0由：yfiles未定义 它不是HomeComponent那么多的DiagramComponent它引用有问题。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'fs-diagram', templateUrl: './diagram.component.html', styleUrls: ['./diagram.component.scss'] }) export class DiagramComponent implements OnInit { private canvas: yfiles.view.CanvasComponent; constructor() { this.canvas = new yfiles.view.CanvasComponent(); } ngOnInit() { } } 文件夹结构如下所示： > root > […]

Webpack – 获取节点模块进入Bundle并加载到html文件

我正试图通过WebPack在浏览器中使用node_modules。 我读过教程和开始的步骤，但卡住了。 我已经使用webpack生成下面的webpackconfigurationbundle.js和去浏览我的index.html在Chrome浏览器中我得到的错误： Uncaught ReferenceError: require is not defined at Object.<anonymous> (bundle.js:205) 我需要做什么额外的步骤才能让浏览器识别要求？ 的index.html <script src="bundle.js"></script> <button onclick="EntryPoint.check()">Check</button> index.js const SpellChecker = require('spellchecker'); module.exports = { check: function() { alert(SpellChecker.isMisspelled('keng')); } }; 的package.json { "name": "browser-spelling", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "node-loader": "^0.6.0", "spellchecker": "^3.3.1", "webpack": "^2.2.1" } } webpack.config.js module.exports = […]

Webpack不包括我们所有的js和jsx文件，甚至是那些在同一个目录下的文件

我们正在尝试升级使用WebPack构build的React.js应用程序。 在我们的升级中，我们正在从Webpack 1.0迁移到2.0，并且我已经对升级进行了“必要的”更改。 但是，当我查看包含的文件时，它正在构build和编译，它是以前包含的文件的一个非常小的规模。 例如，我们在React Flux Actions目录中有34个文件。 有些文件的.js扩展名是.jsx。 但是，在这34个文件中，只有1个出现在构build中。 另一个发生了什么事情33.这个扩展名是.js，但是那个目录下还有更多的.js文件。 我错过了什么？ 这是我们的主要configuration文件。 var path = require('path'); var webpack = require('webpack'); var StringReplacePlugin = require("string-replace-webpack-plugin"); var Environment = require('./js/environment'); module.exports = { entry: [ './js' ], output: { path: path.join(__dirname, 'build'), filename: 'bundle.js', }, plugins: [ new StringReplacePlugin(), new webpack.LoaderOptionsPlugin({ options: { tslint: { emitErrors: true, […]

aws + serverless + webpack =>在prod中找不到xxx模块

我想创build一个包，使用无服务器和webpack在AWS上进行部署。 在serverless.yml我想声明所有的资源（主要是DynamoDb表）和函数。 我想要使​​用外部的node.js库。 该文件夹结构是： |- serverless.yml |- webpack.config.js |- package.json |- src \ – file1.js | – file2.js 从serverless.yml中提取 functions: function1: handler: src/file1.f1 function2: handler: src/file2.f2 从webpack.congfig.js中提取 module.exports = { entry: { file1: './src/file1.js', file2: './src/file2.js', }, target: 'node', output: { libraryTarget: 'commonjs', path: path.join(__dirname, '.webpack'), filename: '[name].js', }, module: { loaders: [ { test: […]