Tag: webpack

Webpack在@ font-face失败

我有一个与FontAwesome使用Webpack的问题。 这是我的装载者： module: { loaders: [ { test: /(\.js$)|(\.jsx$)/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /(\.jade$)/, exclude: /node_modules/, loader: 'jade-loader' }, { test: /(\.css$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /(\.styl$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] }, { test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, exclude: /node_modules/, loader: 'url-loader?importLoaders=1&limit=100000' }, { test: /\.jsx$/, exclude: /node_modules/, […]

在Angular2 + Webpack中使用templateUrl的相对path

import {Component} from 'angular2/core'; @Component({ selector: 'app', styleUrls: ['./app.component.less'], templateUrl: './app.component.html' }) export class AppComponent { name:string = 'Demo' } 当使用templateUrl和styleUrls的相对path时，我得到：错误404，找不到文件： zone.js：101 GET http：//localhost/app.component.html 404（Not Found） 代码： https ： //github.com/Dreampie/angular2-demo 我觉得这是不好的devise，因为在不同的情况下可能会build立目录不一样，我可以把它改成相对的当前path吗？ raw-loader可以解决这个问题，但是html-loader ， less-loader不能用于template ， styles ，它只能在string工作，所以为什么不把它们支撑起来呢？ import {Component} from 'angular2/core'; @Component({ selector: 'app', styles: [require('./app.component.less')], template: require('./app.component.html') }) export class AppComponent { name:string = […]

正确configuration依赖本地软件包的NPM软件包

我有三个本地npm包： C:\projects\A ， C:\projects\B和C:\projects\main 。 Main是使用Webpack构build的React应用程序。 Main取决于A和B ，也取决于B 我们有我们自己的“全球”包pipe理器，它保证包将位于同一个父文件夹中。 我想适应这些： 节点（和webpack的） require将解决本地包 每当我改变A或B时，我不需要在Main npm install 我在Main的package.json做了这个： …. "dependencies": { "A": "file:../A", "B": "file:../B", "react": … ……… 但遇到了一个奇怪的问题： npm不会安装A和B的node_modules中的所有包，所以Webpack构build失败。 而且我需要每次运行npm install 。 我GOOGLE了 ，发现linklocal ，它将所有本地包replace为符号链接。 但遇到另一个问题： linklocal不会安装链接依赖项的依赖关系，因此通常最终会安装链接依赖项的依赖关系两次：在npm安装期间，然后在linklocal 所以我跑了linklocal ，然后npm install在postinstall脚本。 但是npm @ 3没有对符号链接的文件夹做任何事情： npm WARN update-linked node_modules/A needs updating to 1.0.0 from 1.0.0 but we can't, […]

如何使用monorepo（yarnpkg工作区）的webpack

我正在使用纱线工作区 ，其中根目录有一个软件包目录与我所有的回购。 每个回购有其自己的node_modules目录包含其依赖关系。 根node_modules目录包含整个项目的所有开发依赖关系以及所有其他与开发相关的东西，如webpack.config文件。 Webpack使用快速模块重新加载快速服务器包。 我的问题是，如何configurationwebpack外部通过整个项目，而不仅仅是在根目录中排除所有node_modules目录？ 在这种情况下， webpack-node-externals似乎不起作用。 错误信息： WARNING in ./packages/servers/express/node_modules/colors/lib/colors.js 127:29-43 Critical dependency: the request of a dependency is an expression WARNING in ./packages/servers/express/node_modules/express/lib/view.js 79:29-41 Critical dependency: the request of a dependency is an expression Webpackconfiguration： const webpack = require('webpack'); const path = require('path'); const nodeExternals = require('webpack-node-externals'); const StartServerPlugin = require('start-server-webpack-plugin'); module.exports […]

使用Webpack将模块拆分，以便可以将其加载到WebWorker中

我有一个web应用程序，我用webpack编译。 我的代码使用的一个模块名为table.js 。 直到最近，它只是另一个模块，已被编译到我的bundle.js文件中。 现在我需要在一个Web Worker中运行table.js ，所以我需要把它和它的依赖关系放到一个单独的文件中，可以单独加载，也可以通过其他模块加载。 起初我想在我的webpack.config.js的entry包含table.js 。 var config = { … entry: { app: [ './src/main.js', './src/classes/table.js' ], vendors: [], }, … } 这没有用。 然后，我想像我的供应商捆绑分开它。 var config = { /* for vendors (and other modules) we have a CDN for */ addExternal: function (name, globalVar) { this.externals[name] = globalVar; this.entry.vendors.push(name); }, /* […]

与一个Web小部件 – meteor，反应，节点通信

我正在构build一个聊天仪表板和小部件，客户应该能够将小部件放入其页面。 一些类似的例子是Intercom或者Drift 。 目前，“主”应用程序是用Meteor.js编写的（前端是React）。 我写了一个<Widget />组件，并将其引入到/widget目录中。 在这个目录里面，我也有一个index.jsx文件， index.jsx包含以下内容： import React from 'react'; import …… ReactDOM.render( <Widget/>, document.getElementById('widget-target') ); 然后我在index.jsx设置一个入口点的webpackconfiguration，当运行bundle.js在公共目录下将bundle.js吐出来。 这可以包含在另一个页面，只需包含一个script和div ： <script src="http://localhost:3000/bundle.js" type="text/javascript"></script> <div id="widget-target"></div> 几个问题： 这个实现有什么问题？ 他们的安全问题是否需要注意？ 前面链接的例子似乎都以某种forms使用iframe。 什么是与我的主要meteor应用程序沟通的最佳方式？ 一个REST API？ 用Socket.io发送事件？ 小部件是一个聊天小部件，所以我需要来回发送消息。 我怎样才能为用户和小部件实现某种唯一的标识符/用户身份validation？ 目前，该小部件是预编译的。

使用Webpack通过DefinePlugin传递NODE_ENV值

我想通过DefinePlugin使用webpack将NODE_ENV值注入到我的代码中。 我或多或less地检查了一个相同的问题 ，但仍然无法实现。 具体来说，这是我的设置。 在package.json ： "scripts": { "build": "rimraf dist && cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development && node webpack-dev-server.js" }, 在webpack.config.js ： "use strict"; /* requiring the modules */ const webpack = require("webpack"); const path = require("path"); /* defining the source and distribution paths */ const DIST_DIR = path.resolve(__dirname, "dist"); const SRC_DIR = […]

Webpack与客户端/服务器节点设置？

我正在尝试为具有节点后端服务器的Angular2应用程序设置基于webpack的stream程。 经过几个小时的抨击，我已经设法让客户快乐地build设，但我不知道如何现在整合我的服务器版本。 我的服务器使用生成器，所以必须针对ES6，它需要指向一个不同的types文件（main.d.ts而不是browser.d.ts）。 我的源代码树看起来像; / — client/ — — <all my angular2 bits> (*.ts) — server/ — — <all my node/express bits> (*.ts) — webpack.config.js — typings/ — — browser.d.ts — — main.d.ts 我想也许只是在客户端和服务器文件夹tsconfig.json会工作，但没有运气那里。 我也无法find一个方法来获取html-webpack-plugin来忽略我的服务器包，而不是将其注入到index.html中。 我目前的tsconfig和webpack在下面，但有谁成功地让webpack捆绑这样的设置？ 任何指针将不胜感激。 { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "declaration": false, "removeComments": true, "noEmitHelpers": false, "emitDecoratorMetadata": […]

如何保持使用webpack我的shebang？

有什么办法让Webpack把#!/usr/bin/env node在我的文件的顶部？ 我试图捆绑CLI和一个模块…这是一个有点棘手导出我的index.js / cli.js分别使用一个configuration文件…并使cli需要索引…我得到它工作… 但是..我没有find任何方法来保持#!/usr/bin/env node在我的cli文件的顶部，任何想法？ 简而言之，webpack会输出一个像这样的文件： /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; …………………………………………………….. 但我需要的是 #!/usr/bin/env node //<—— HEREEEE /******/ (function(modules) { // […]

webpack-dev-server无法find模块'webpack'

我试图使用webpack-dev-server来运行一个简单的程序，但我得到这个错误： module.js:471 throw err; ^ Error: Cannot find module 'webpack' 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 Object.<anonymous> 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) 我用下面的npm命令安装了webpack npm install –save-dev webpack 我有以下configuration： (webpack.config.js) var webpack = require('webpack'); var path = require('path'); var […]