Questions tagged «webpack»

我目前正在通过webpack / babel在React应用中使用ES6。我正在使用索引文件来收集模块的所有组件并导出它们。不幸的是，这看起来像这样： import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; 因此，我可以像这样从其他地方很好地导入它： import { Comp1, Comp2, Comp3 } from './components'; 显然，这不是一个很好的解决方案，所以我想知道是否还有其他方法。我似乎无法直接导出导入的组件。

201 javascript  ecmascript-6  webpack  babeljs 

moment.js使用webpack时，有什么方法可以阻止加载所有语言环境（我只需要英语）？我正在查看源代码，似乎如果hasModule为webpack定义了它，那么它将始终尝试require()每个语言环境。我很确定这需要一个拉取请求来解决。但是，有什么办法可以通过webpack配置修复此问题？ 这是我的webpack配置以加载momentjs： resolve: { alias: { moment: path.join(__dirname, "src/lib/bower/moment/moment.js") }, }, 然后，只要我需要它，我就可以做require('moment')。这可以工作，但是会在我的捆绑包中添加约250 kB的不需要的语言文件。另外我正在使用momentjs和gulp的凉亭版本。 另外，如果webpack配置无法解决此问题，则这里是指向加载语言环境的函数的链接。我尝试&& module.exports.loadLocales在if语句中添加内容，但我想webpack实际上无法正常工作。它只是require没什么不管是什么。我认为它现在使用了正则表达式，所以我真的不知道您什至会去修复它。

199 javascript  gulp  momentjs  webpack 

我正在尝试自动化进入/ dist的资产。我有以下config.js： module.exports = { context: __dirname + "/lib", entry: { main: [ "./baa.ts" ] }, output: { path: __dirname + "/dist", filename: "foo.js" }, devtool: "source-map", module: { loaders: [ { test: /\.ts$/, loader: 'awesome-typescript-loader' }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: { // you can …

188 webpack 

我是整个nodejs / reactjs领域的新手，如果我的问题听起来很傻，我深表歉意。所以我在玩reactabular.js。 每当我执行此操作时，npm start它就会一直运行localhost:8080。 我如何更改它0.0.0.0:8080以使其可以公开访问？我一直在尝试阅读上述回购中的源代码，但未能找到执行此设置的文件。 另外，要补充一点- 80如果可能的话，如何使它在端口上运行？

180 node.js  reactjs  npm  webpack  webpack-dev-server 

我正在使用create-react-app，但不想使用eject。 目前尚不清楚应该通过@ font-face导入并本地加载的字体在哪里。 即我正在加载 @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 有什么建议？ -编辑 包括丹在回答中提到的要点 ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 …

177 css  reactjs  fonts  webpack  create-react-app 

我正在尝试做一些我认为应该可行的事情，但是我真的不能仅仅从webpack文档中了解如何做到这一点。 我正在编写一个JavaScript库，其中包含几个可能相互依赖的模块。最重要的是，所有模块都使用jQuery，其中一些可能需要jQuery插件。然后，该库将在可能需要某些或所有模块的几个不同的网站上使用。 定义模块之间的依赖关系非常容易，但是定义它们的第三方依赖关系似乎比我预期的要难。 我想实现的目标是：对于每个应用程序，我都希望有两个捆绑文件，一个具有必要的第三方依赖关系，另一个具有我库中的必要模块。 示例：假设我的库具有以下模块： a（需要：jquery，jquery.plugin1） b（要求：jquery，a） c（要求：jquery，jquery.ui，a，b） d（要求：jquery，jquery.plugin2，a） 我有一个需要模块a，b和c的应用程序（将其视为唯一的条目文件）。这种情况下的Webpack应生成以下文件： 供应商捆绑包：带有jquery，jquery.plugin1和jquery.ui； 网站捆绑：带有模块a，b和c； 最后，我希望将jQuery作为全局变量，所以我不需要在每个文件上都需要它（例如，我可以只在主文件上需要它）。jQuery插件只会在需要时扩展$全局（如果不需要其他模块的其他模块可以使用它们，这不是问题）。 假设有可能，这种情况下的webpack配置文件示例是什么？我在配置文件上尝试了几种加载程序，外部程序和插件的组合，但是我并没有真正了解它们在做什么以及应该使用哪个。谢谢！

173 javascript  webpack  external-dependencies 

我使用该create-react-app软件包创建了一个ReactJS项目，该项目运行良好，但找不到Webpack文件和配置。 react-create-app如何与webpack一起使用？默认情况下，使用以下命令安装的webpack配置文件在哪里create-react-app？我在项目的文件夹中找不到配置文件。 我尚未创建替代配置文件。我可以与其他文章一起管理配置设置，但是我想找到常规的配置文件。

172 javascript  reactjs  webpack  ecmascript-6  create-react-app 

有谁知道如何在webpack.config.js文件中创建多个输出路径？我正在使用bootstrap-sass，它带有一些不同的字体文件，等等。为了使webpack能够处理这些，我包括了可以正常工作的文件加载器，但是将其输出的文件保存到了我指定的输出路径中我其余的文件： output: { path: __dirname + "/js", filename: "scripts.min.js" } 我想实现一些功能，以便我可以查看Webpack输出的扩展类型以及以.woff .eot结尾的扩展名等，将其转移到其他输出路径。这可能吗？ 我做了一些谷歌搜索，在github上发现了这个* issue，其中提供了一些解决方案，请编辑： 但似乎您需要了解能够使用哈希方法指定输出的入口点，例如： var entryPointsPathPrefix = './src/javascripts/pages'; var WebpackConfig = { entry : { a: entryPointsPathPrefix + '/a.jsx', b: entryPointsPathPrefix + '/b.jsx', c: entryPointsPathPrefix + '/c.jsx', d: entryPointsPathPrefix + '/d.jsx' }, // send to distribution output: { path: …

165 path  output  config  webpack  loader 

我仍然对如何使用webpack解析模块路径感到困惑。现在我写： myfile = require('../../mydir/myfile.js') 但我想写 myfile = require('mydir/myfile.js') 我以为resolve.alias可能会有所帮助，因为我看到了一个类似的示例{ xyz: "/some/dir" }，所以可以使用它作为别名require("xyz/file.js")。 但是，如果我将别名设置为{ mydir: '/absolute/path/mydir' }，require('mydir/myfile.js') 将无法正常工作。 我很笨，因为我已经阅读了很多文档，并且觉得自己缺少一些东西。避免用../../etc 写下所有相对要求的正确方法是什么？

164 javascript  webpack 

我向项目添加了一个新的npm软件包，并在我的一个模块中要求它。 现在我从webpack收到此消息， build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB". 这是什么意思？我需要采取一些行动吗？

164 webpack  babeljs 

我看到人们在Webpack中使用gulp。但是后来我看webpack可以代替gulp吗？我在这里完全困惑...有人可以解释吗？ 更新 最后，我从吞咽开始。我刚接触现代前端，只是想快速起步并运行。一年多以后，现在我的脚已经湿透了，现在可以开始使用webpack了。对于那些穿着相同鞋子的人，我建议使用相同的路线。并不是说您不能尝试使用webpack，而是先说一下是否看起来很复杂，首先从gulp开始...这没错。 如果您不希望吞咽，是的，虽然有些麻烦，但是您也可以在package.json中指定命令，然后从命令行调用它们，而无需任务运行器即可启动并开始运行。例如： "scripts": { "babel": "babel src -d build", "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js", "build": "npm run clean && npm run babel && npm run prepare && npm run browserify", "clean": "rm -rf build && rm -rf dist", "copy:server": "cp build/server.js dist/server.js", "copy:index": "cp src/client/index.html dist/client/index.html", "copy": "npm …

161 node.js  webpack  gulp 

我刚刚开始使用webpack，并且很难构建多入口点示例。示例中的webpack.config.js文件包括以下行 var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin"); 对我来说失败的错误 Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin' 到处搜索，我发现了将CommonsChunkPlugin与表达式结合使用的其他示例 var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js"); 失败并显示错误 ReferenceError: webpack is not defined 一些更多的搜索发现了许多示例，包括 var webpack = require('webpack'); 现在我的构建失败了 Error: Cannot find module 'webpack' 我对如何进行一无所知。

151 node.js  webpack 

我正在使用create-react-app。我正在尝试从文件夹中的文件中调用公用文件夹中的图片src/components。我收到此错误消息。 ./src/components/website_index.js找不到模块：您试图导入属于项目src /目录之外的../../public/images/logo/WC-BlackonWhite.jpg。不支持src /以外的相对导入。您可以将其移动到src /中，也可以从项目的node_modules /中向其添加符号链接。 import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> 我读过很多东西，说您可以导入路径，但对我来说仍然行不通。任何帮助将不胜感激。我知道有很多这样的问题，但是它们都告诉我要导入徽标或图像，因此很明显我在全局图中缺少某些内容。

149 javascript  reactjs  webpack  create-react-app 

React Router允许React应用处理/arbitrary/route。为了使其正常工作，我需要我的服务器在任何匹配的路由上发送React应用程序。 但是webpack开发服务器不能处理任意端点。 这里有一个使用附加快递服务器的解决方案。 如何允许webpack-dev-server允许react-router的入口点 但是我不想启动另一个Express服务器来允许路由匹配。我只想告诉webpack开发服务器匹配任何URL，并向我发送我的react应用。请。

148 reactjs  ecmascript-6  webpack  react-router 

我正在使用webpack来管理reactjs项目。我想通过webpack在javascript中加载图像file-loader。以下是webpack.config.js： const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, devtool: 'eval-source-map', relativeUrls: true, resolve: { …

141 javascript  reactjs  webpack