Tag: webpack

用库组件/碎片排除Webpack外部

Webpack在写同构的Javascript中对我们非常有用，在捆绑的时候为浏览器全局replacenpm包。 所以，如果我想在Node.js上使用node-fetch npm包，但在捆绑时排除它，只使用本地浏览器fetch全局，我可以在我的webpack.config.js提到它： { externals: { 'node-fetch': 'fetch', 'urlutils': 'URL', 'webcrypto': 'crypto', // etc } } 然后我的CommonJS需要const fetch = require('node-fetch')将被转换为const fetch = window.fetch （或者其它）。 到现在为止还挺好。 这是我的问题：当需要整个模块时这很容易，但是当我需要一个导出模块的子模块/单个属性时呢？ 例如，假设我想使用WhatWG URL标准 ，同构。 我可以使用urlutils npm模块，该模块module.exports整个URL类，所以我的要求如下所示： const URL = require('urlutils') 然后我可以在我的externals部分列出urlutils ，没有问题。 但是现在我想使用一个更新的（更受支持的） npm软件包，比如whatwg-url ，我不知道如何使用它，因为我的需求如下所示： const { URL } = require('whatwg-url') // or, if you don't like destructuring assignment const […]

在Node JS Server代码中的Webpack别名

我正在构build一个同构的React / React-Router / Redux / Webpack应用程序，我试图实现服务器端渲染。 我的目录看起来像： /client /actions /components /containers /server /server.js 在我的webpackconfiguration中，我为客户端中的所有文件夹设置了别名： var path_base = path.resolve(__dirname, '..'); const resolve = path.resolve; const base = function() { var args = [path_base]; args.push.apply(args, arguments); return resolve.apply(resolve,args); }; const resolve_alias = base.bind(null, 'src/client'); const aliases = [ 'actions', 'components', 'constants', 'containers', 'middleware', 'reducers', 'routes', 'store', […]

webpack详细的错误消息

我正在使用webpack，最近更新了一些软件包（babel，babel-loader，..），并看到webpack输出中的错误。 但是，不知道如何进一步debugging。 该应用程序似乎工作正常。 我尝试了各种debugging选项，但没有得到详细的错误输出。 ./node_modules/.bin/webpack –config webpack.config.js –progress –profile –colors –display-error-details –display-reasons –debug NODE_ENV == production : false 6809ms build modules 14ms seal 55ms optimize 30ms hashing 59ms create chunk assets 27ms additional chunk assets 1551ms optimize chunk assets 33ms optimize assets 83ms emit Hash: 5be1a8485c4110c2f837 Version: webpack 1.9.8 Time: 8674ms Asset Size Chunks Chunk […]

Javascript / webpack：如何连接目录中的所有json文件，并使用自定义循环覆盖文件

我正在用webpack构buildreactJs包。 我目前正试图将json文件连接到一个对象，以便与i18next一起使用。 我觉得这很简单，我不想使用过于复杂的解决scheme。 我有一个目录结构 消息/ LOCALE_NAME / domain_name.json 如何导入我的代码中的常规对象中的所有json文件？ 到目前为止，我一开始正在努力，因为我发现需要（'fs'）的build议，但webpack告诉我它不能解决fs模块，我已经看到我不能安装它，因为它是默认节点configuration。 有些帮助赞赏。 谢谢 ！

用webpack将供应商库分成多个块

我想将我的供应商代码分成两个块，一个包含所有angular库，另一个包含所有其他的东西。 我的angular度应用程序有一个单一的入口点，并设置如下所示： entry: { app: './path_to/app.js', vendor: ['jquery', 'moment', 'numeral'], 'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs'] } 然后我使用CommonsChunkPlugin来configuration其他两个包： new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', chunks: ['app'], warnings: false, filename: 'vendor.bundle.js' }) new webpack.optimize.CommonsChunkPlugin({ name: 'vendor.angular', chunks: ['app'], warnings: false, filename: 'vendor.angular.bundle.js' }) 这会生成3个文件： Version: webpack 1.13.1 Time: 12719ms Asset Size Chunks Chunk Names app.bundle.js 19.2 kB 0 [emitted] app […]

如何让webpack和iis一起工作？

我有Angular 2和Webpack 2启动器 ，它通过webpack-dev-server在节点上运行，而我从web-api的visual studio运行它。 问题是angular2-webpack-starter在端口3000上运行webpack-dev-server，而IIS Express在不同的端口5000上运行。 这对我来说非常重要，因为我想要使用HMR并在每次更改文件时重新加载。 那么，怎样才能把它们结合在一起呢？ 在同一个端口上运行？ 或任何其他解决scheme？

我可以检测到我的脚本是否正在被Webpack处理？

我试图在React中使用同构渲染，所以我可以输出静态HTML作为我的应用程序的文档。 问题是我有一个特定的组件只能运行在客户端上，因为它引用了window 。 解决scheme是显而易见的：不要在服务器上呈现它。 是的，我不能在服务器上渲染它，但仍然需要将它包含在我的webpack包中，以便在客户端上呈现它。 问题是，防止我的组件在服务器上呈现的代码是： function isServer() { return ! (typeof window != 'undefined' && window.document); } 但isServer()在webpack捆绑时也是true ，我希望它在webpack运行时正常工作。 那么，如何检测webpack正在运行？ 我正在寻找这样的东西： function isWebpack() { // what do I put here? } 现在，如果isServer()和!isWebpack()正常，我可以正常渲染我的客户端组件。 谢谢！ 编辑 这是我正在尝试构build的组件： function isServer() { return ! (typeof window != 'undefined' && window.document); } import React from 'react'; const LED = […]

错误：无法parsing模块'babel-loader'

我试图在我的package.json中的postinstall脚本上运行webpack，当我推送到heroku，但我得到以下错误。 ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /tmp/build_6cb4b10367d9382367ab72f2e2f33118 当我在本地运行命令时，我没有问题。 下面是我的webpackconfiguration – 我曾尝试使用resolveLoader来解决问题，但无济于事？ var path = require('path'); var webpack = require('webpack'); var config = { entry: path.resolve(__dirname, './app/main.js'), output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: […]

Webpack无法加载我的npm模块

我有麻烦了，我只是做了npm卸载react-bootstrap，然后npm安装react-bootstrap和webpack无法加载这个模块了。 我像这样启动webpack： /var/www/cloud/node_modules/.bin/webpack –config webpack.config.js –watch –display-error-details 这里是错误，它只是无法find在react-bootstrap内的package.json： ERROR in ./core/static/core/js/modules/dashboard/admin/Customer.js Module not found: Error: Cannot resolve module 'react-bootstrap' in /var/www/cloud/core/static/core/js/modules/dashboard/admin resolve module react-bootstrap in /var/www/cloud/core/static/core/js/modules/dashboard/admin looking for modules in /var/www/cloud/node_modules resolve 'file' react-bootstrap in /var/www/cloud/node_modules resolve file /var/www/cloud/node_modules/react-bootstrap is not a file /var/www/cloud/node_modules/react-bootstrap.js doesn't exist /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist resolve 'file' or 'directory' /var/www/cloud/node_modules/react-bootstrap resolve […]

Webpack传输轮询错误

我在启动webpack-dev-server的express / webpack应用程序中有下面的咕噜任务： "webpack-dev-server": { options: { webpack: webpackConfig, publicPath: '/assets/', watch: true, inline: true, hot: true, quiet: true }, start: { keepAlive: true, webpack: { devtool: 'eval', debug: true } } } 我遇到的问题是，轮询者只是垃圾邮件我的铬控制台，这将是非常讨厌的，当涉及到debugging。 （我在裸机应用程序阶段）。 任何人有任何想法可能造成这一点？