Questions tagged «webpack»

因此，这是我当前通过ES6导入Webpack中的图像和图标的工作流程： import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> 这变得很快。这就是我想要的： import * from './images' <img src={doggy} /> <img src={turtle} /> 我觉得必须有某种方法可以动态地从特定目录中导入所有文件（不带扩展名），然后根据需要使用这些文件。 任何人都看过此事，或者对最佳解决方案有任何想法？ 更新： 使用选择的答案，我能够做到这一点： function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); …

99 reactjs  webpack  ecmascript-6 

我正在使用webpack在React Webapp上工作，与本教程一起宽松地工作。 偶然地，我将node_modules文件夹添加到了我的git中。然后，我再次使用将其删除git rm -f node_modules/*。 现在，当我尝试启动webpack服务器时，出现以下错误： > webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors sh: webpack-dev-server: command not found npm ERR! Darwin 14.4.0 npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve" npm ERR! node v0.12.4 npm ERR! npm v2.10.1 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! …

97 node.js  npm  webpack 

我遇到一个问题，inline-source-map当我使用Chrome devtools调试器时，使用配置设置由Webpack生成的源地图关闭了一行。Webpack是在Ruby on Rails应用程序中设置的，以生成由几十个模块组成的串联的，最小化的JavaScript文件。这些模块中的大多数是ReactJS组件，由jsx加载器进行解析。然后，Webpack的输出application.js与gems生成的其他一些JavaScript库一起包含在文件中。 当我使用时eval-source-map，没有问题。关于使用use的某些事情inline-source-map会使行号被一甩掉。 检查不是React组件的JavaScript仍然存在此问题，因此我认为它与jsx的使用无关。

96 javascript  ruby-on-rails  google-chrome  webpack  source-maps 

先前的研究： 如webpack的Wiki所述，可以使用分析工具来优化构建性能： 来自：https : //github.com/webpack/docs/wiki/build-performance#hints-from-build-stats 建造统计信息提示 有一个分析工具可以可视化您的构建，并提供一些提示，说明如何优化构建大小和构建性能。 您可以通过运行webpack --profile --json-stats.json来生成所需的JSON文件 我生成了stats文件（可在此处获取），并将其上传到webpack的分析工具，并在“ 提示”标签下告诉我要使用prefetchPlugin： 来自：http : //webpack.github.io/analyse/#hints 长模块构建链 使用预取来提高构建性能。从链的中间预取一个模块。 我从内到外挖掘了网络，发现在prefechPlugin上可用的唯一文档是： 来自：https : //webpack.js.org/plugins/prefetch-plugin/ 预取插件 new webpack.PrefetchPlugin([context], request) 对普通模块的请求，该请求甚至在需求发生之前就已解决并构建。这样可以提高性能。首先尝试对构建进行概要分析，以确定巧妙的预取点。 我的问题： 如何正确使用prefetchPlugin？ 什么是将其与“分析”工具一起使用的正确工作流程？ 我怎么知道prefetchPlugin是否有效？我该如何测量？ 从链的中间预取模块意味着什么？ 我会很感激一些例子 请帮助我使这个问题成为下一个想要使用prefechPlugin和Analyze工具的开发人员的宝贵资源。谢谢。

96 optimization  webpack 

我对Chrome内存缓存与磁盘缓存感兴趣吗？我使用webpack，常见的块插件，并使用chunkhash生成我的所有文件。 内存与磁盘缓存有何不同？当我重新加载页面时，某些文件是从内存缓存中加载的，而某些是从磁盘缓存中加载的（从内存缓存中的bundle.js和image.jpg以及从磁盘缓存中的css）。有时情况有所不同。我们可以控制它，选择从哪里加载什么？内存缓存似乎比磁盘缓存快。

96 google-chrome  caching  webpack 

我已经用React.js和webpack建立了一个网站。 我想在网页中使用Google字体，因此将链接放在该部分中。 Google字体 <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> 并设置CSS body{ font-family: 'Bungee Inline', cursive; } 但是，它不起作用。 我怎么解决这个问题？

96 reactjs  webpack  google-font-api 

我刚刚创建了一个全新的 角度cli项目 并运行npm install bootstrap@4.0.0-beta jquery popper.js --save 和更改.angular-cli.json的相关部分，如下所示 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], 但是收到以下错误 10:2287 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at Object.2 (scripts.bundle.js:66) at __webpack_require__ (bootstrap 4403042439558687cdd6:54) at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25) …

95 twitter-bootstrap  angular  webpack  popper.js 

我尝试运行，webpack --watch并且在编辑我的JS文件后，它不会触发自动重新编译。 我尝试webpack使用重新安装，npm uninstall但仍然无法正常工作。 有任何想法吗？

95 javascript  webpack  fsevents 

我的应用程序中有大量的javascript文件分成4个子目录。一声不gr，我抓起了所有的并将它们编译成一个文件。这些文件没有module.exports函数。 我想使用webpack并将其分为4部分。我不想手动输入所有文件。 我想创建一个插件，该插件在编译时会遍历目录树，然后获取所有.js文件名和路径，然后要求子目录中的所有文件并将其添加到输出中。 我希望将每个目录中的所有文件编译成一个模块，然后可以从我的入口点文件中将其要求，或者包含在http://webpack.github.io/docs/plugins.html提及的资产中。 添加新文件时，我只想将其放置在正确的目录中，然后知道将包含该文件。 有没有办法使用webpack或有人编写的插件来做到这一点？

95 javascript  build  webpack 

我开始在使用webpack的node/express环境中开发ReactJS服务器端渲染的应用程序react-router。我对每个Webpack包在开发和生产（运行时）环境中的作用感到非常困惑。 这是我的理解摘要： webpack：是一个软件包，是一种工具，用于将Web应用程序的不同部分结合在一起，然后捆绑成一个.js文件（通常是bundle.js）。然后，结果文件将在产品环境中提供以由应用程序加载，并包含运行代码的所有必需组件。功能包括缩小代码，缩小代码等。 webpack-dev-server：是一个提供服务器以处理网站文件的软件包。它还bundle.js从客户端组件构建单个.js文件（），但将其提供给内存。它还具有选项（-hot）来监视所有构建文件并在代码更改的情况下在内存中构建新的捆绑软件。服务器直接在浏览器中提供服务（例如：）http:/localhost:8080/webpack-dev-server/whatever。内存加载，热处理和浏览器服务的结合使用户可以在代码更改时在浏览器上更新应用程序，非常适合开发环境。 如果我对上面的文字有疑问，我真的不确定下面的内容，因此如有必要请告诉我 当使用一个常见的问题webpack-dev-server有node/express是webpack-dev-server一个服务器，是node/express。这使得该环境很难同时运行客户端和某些节点/表达代码（API等）。注意：这就是我所面临的，但是如果能理解为什么会更详细地了解这一点，将非常高兴... webpack-dev-middleware：这是一种中间件，具有webpack-dev-server（内存捆绑，热重装）相同的功能，但格式可以插入到server/express应用程序中。这样，您就可以webpack-dev-server在节点服务器内部拥有某种服务器（）。 糟糕：这是一个疯狂的梦想吗？？？这一部分如何解决dev和prod方程并使生活更简单 webpack-hot-middleware：这... 卡在这里...在寻找时发现了这件作品webpack-dev-middleware...不知道如何使用它。 ENDNOTE：对不起，有什么错误的想法。我真的需要帮助，以便在复杂的环境中理解这些变体。如果方便，请添加更多可构成整个方案的软件包/数据。

94 javascript  node.js  webpack  webpack-dev-server  webpack-dev-middleware 

我是webpack的新手，我发现在生产版本中我们可以减少整体代码的大小。目前，webpack构建大约8MB的文件，而main.js构建大约5MB的文件。如何减少生产构建中的代码大小？我从互联网上找到了一个样本Webpack配置文件，并为我的应用程序进行了配置，然后运行npm run build并开始构建它，并在./dist/目录中生成了一些文件。 这些文件仍然很重（与开发版本相同） 如何使用这些文件？目前，我正在使用webpack-dev-server运行该应用程序。 package.json文件 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors" }, …

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

我有一些要开发的东西-例如，我不想让我的分布式构建文件肿的模拟。 在RequireJS中，您可以在插件文件中传递配置，然后根据需要进行配置。 对于webpack，似乎没有办法做到这一点。首先创建一个环境中运行时配置我用resolve.alias重新指向根据环境，例如要求： // All settings. var all = { fish: 'salmon' }; // `envsettings` is an alias resolved at build time. module.exports = Object.assign(all, require('envsettings')); 然后，在创建webpack配置时，我可以动态分配envsettings指向的文件（即webpackConfig.resolve.alias.envsettings = './' + env）。 但是我想做类似的事情： if (settings.mock) { // Short-circuit ajax calls. // Require in all the mock modules. } 但是很明显，如果环境不是模拟的，我不想构建那些模拟文件。 我可能可以再次使用resolve.alias手动将所有这些要求重新指向存根文件-但是有没有一种方法可以减少恶意程度？ 有什么想法可以做到吗？谢谢。

93 javascript  build  conditional  require  webpack 

我使用创建了一个vue webpack项目vue-cli。 vue init webpack myproject 然后在dev模式下运行项目： npm run dev 我收到此错误： 加载资源失败：服务器响应状态为404（未找到）http：// localhost：8080 / favicon.ico 那么在webpack中，如何favicon.ico正确导入？

91 html  ecmascript-6  webpack  vue.js  favicon 

例如 @import url("~./foobar"); 在这里看到了它，不确定是特定于软件包的东西还是实际的CSS语法。

91 css  webpack  webpack-style-loader 

我只能在下看到实际的应用/public。 的配置webpack.config.js如下： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

91 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server