我想知道是否有一个配置选项，告诉webpack只记录“重要信息”到终端。几乎只是错误和警告，而不是所有这些： 有这么多的产出！我很想抑制常见的东西，只让网页输出警告/错误。希望为webpack、webpack dev server和karma webpack提供解决方案 注意：我尝试了noInfo:true和quiet:true，但似乎没有奏效 编辑：我认为这可能是不可能的，所以我在github上创建了一个问题：我不知道这个功能是什么时候添加的，但我注意到，您可以添加一个webpackMid

我的网页包eslint配置： eslint: { configFile: ".eslintrc", emitWarnings: true }, module: { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.(js|jsx)$/, loaders: [ require

我正在用webpack构建一个webapp，但遇到了一些我自己或文档无法理解的问题 我想要实现的是将webpack配置为不包含一个特定json文件或所有json文件到主捆绑包中。但是，仍然可以这样要求他们： define(['app/config.json'], function (config) { ... }); module: { loaders: [ { test: /\.json/, loader: "js

项目使用模块A 此模块具有带有本地路径的require，例如require（'./otherModule'） 如何使webpack从另一个目录解析此路径，并在它不存在时回退到正常解析？没有简单的方法来别名relativerequire（）语句，如require（'./otherModule'）。我不建议这样做。它打破了文件路径的基本概念，可能会使其他程序员感到困惑 根相对路径（推荐） 您可以使用“根相对”路径。这些路径以/开头。然后您可以像这样编写require语句require（“/app/c

我希望每次更改文件时都能重置我的网页包 目前我有这样一个代码： watchOptions: { aggregateTimeout: 600, poll: true }, （基于） 这很有效，但不是我想要的方式 预期： 文件已更改 重新启动网页包 另一个文件已更改 网页包立即重新启动 实际情况： 文件已更改 重新启动网页包 另一个文件已更改 webpack首先需要编译所有内容，完成后将重新启动 有什么解决方案/提示吗 或者可能无法在Webpack中完成？可能您无法理解Webpac

例如，我有一个主条目html文件： <div> <!-- I'd like to include a html partial here --> </div> 我有一个部分html <span>I'm a partial html piece</span> 我是一个不完整的html片段 我希望我可以使用webpack生成最终的html，如下所示： <div> <span>I'm a parti

我对url加载器、文件加载器和图像加载器很困惑。有谁能解释一下url加载器、文件加载器和图像加载器的区别，以及为什么我们需要它们。谢谢 url加载程序与文件加载程序类似，但如果文件小于限制，则可以返回数据url 可以使用查询参数指定限制。欢迎使用SO。请看。嗯，url加载器和图像加载器都可以做同样的事情了。。。有人知道哪一个最适合内联图像吗？？（svg，png）@Spock使用url加载程序

我正在尝试编写一个网页包文件，该文件将在支持es6的reactjs中创建一个项目。这是我的webpack.config.js webpackConfig = { /*entry: './index.js', output: { path: path.resolve(__dirname, 'dist/'), filename: 'build.js' },*/ entry: { lite: "./lite.js", p

我从webpack开始 我已经能够指定webpack.config.js的位置，如下所示： "webpack --config ./App/webpack.config.js" 现在我正试图将webpack dev服务器与该文件一起使用，但我找不到如何为其指定webpack.config.js位置 这是my package.json的相关部分 "scripts": { "start": "webpack-dev-server --config ./App/webpack.config.js

运行带有typescript的react redux应用程序时，如果运行带有istanbul remap的karma webpack以映射回typescript源代码，我会得到不正确的覆盖率 例如，我对react单元测试添加了一个更改，使代码不再进入mapStateToProps和mapDispatchToProps（忽略redux流）。 如果不使用重新映射，我将获得正确的覆盖率，如下所示： 使用“重新映射”，我得到的覆盖率结果不正确： 更改网页包类型脚本加载程序后 loaders: ['re

我的aurelia应用程序似乎无法与网页包热加载程序配合使用： Cannot read property 'status' of undefined 我可以找到以下资源： 所以现在应该可以了，但我不知道在安装了aurelia热模块重新加载模块后该怎么办。aurelia热模块的更换由aurelia loader webpack 2.0.0使用 为了让它工作，我认为我们应该很好地配置插件（至少现在是这样） 我并没有在回购协议中挖到一些破绽，但也许正在起作用，也许没有

我知道大多数人都有相反的问题，但实际上我想禁用自动重新加载功能 以下是我运行服务器的方式： webpack-dev-server --open --progress 这是我的开发服务器配置： devServer: { contentBase: 'app', port: 9005, hot: false, inline: false } 版本： "webpack": "1.14.0", "webpack-dev-middleware": "1.9.0", "we

我使用electron vue创建了一个应用程序，当运行npm run dev时，它是好的，但是当运行npm run pack时，当打开index.html时，我在控制台中得到了错误： 未捕获引用错误：未定义模块 在renderer.js:1 有人知道为什么吗 谢谢大家! 当您使用webpack输出中的选项libraryTarget:“commonjs2”使用webpack进行传输时，这是预期的，如下所述：此时未更新electron vue。（目前为电子版2.x） 有一个样板，我分叉了elect

我正在写一个网页包插件，用于在磁盘上生成一个javascript文件。它工作正常，但我不知道如何在我的源代码中导入这个文件。webpack中的插件配置如下所示： new MyModuleWebpackPlugin({ filename: '/my-module.js', minify: true, }), 当我运行webpack命令时，文件mymoudle.js将在dist目录下生成。但是我如何在我的js文件中导入这个文件呢？如果我按以下方式导入，网页将抱怨无法解析路径。/dist/m

我在一台特定的机器上发现以下网页错误。在另一台机器上，我没有收到任何错误&构建成功。在这两台机器上，我们都使用Webpack2.2.1版本 错误： Set is not defined at Compiler.<anonymous> (/home/../meCommerce-fed/fed-mecommerce/node_modules/copy-webpack-plugin/dist/index.js:83:33) at Compiler.next (/home/../meCom

有些网页配置文件在devtool选项前面加了一个磅符号（#）。例如，vue cli使用的网页包模板就可以做到这一点。这是什么意思？设置eval sourcemap和#eval sourcemap之间有什么区别？根据 前缀@、#或#@将强制使用pragma样式。（默认为@in） webpack@1而且#在webpack@2；建议使用#） WebPack中的“Pragma样式”只是指定sourcemaps的格式，如果WebPack文件的sourcemaps在浏览器中不起作用，则可以更改该前缀，这应该

我正在尝试将sass/scss编译为css进行生产 本质上，我想知道如何为prod中的资产创建一个文件结构，并使scss文件符合prod中的css？我在很多图坦卡蒙中看到过，所有东西都被转储到dist或公共文件夹中。我可以为JS做这件事，但你如何为我所有的资产做这件事？例如，在公用文件夹中有一个JS文件夹、一个图像文件夹、css等 这是我的webpack.config.js var webpack = require('webpack'); var path = require('path');

我正在尝试并遇到一个初学者问题： 我用纱线添加了webpack和几个供应商包： yarn add --dev webpack yarn add highlight.js yarn add datatables ... 正如预期的那样，这将供应商的东西下载到node\u模块中，并创建了一个packages.json 我怎么告诉webpack 要将packages.json中的所有包打包到一个javascript文件中，例如packs/vendor.js 要将packages.json中的所有包

我正在为Angular 4/TypeScript项目使用Webpack，在我的一个模块中，我想访问一个config.json文件，其中包含一些必须在服务器上配置的值（即，可以在运行时更改而不是在编译时固定的配置值） 在我的源代码中，我使用 let config = require('./../relative/path/config.json'); 它工作得很好，但webpack将其打包，并在生成的dist中，配置文件的值与其他值一起在app.XXX.js文件中结束 我试图在webpack.c

在创建/构建网页包时，如何将ENV变量传递到代码中是非常清楚的。请参阅此现有线程： 但是，我想知道是否有一种方法可以让已经打包/捆绑的.js代码根据在ENV vars中读取的内容更新所使用的变量，而不必使用不同的ENV vars进行另一个webpack/构建 情景： 开发构建webpack.config构建，其中： 新的webpack.DefinePlugin({ 'APISECRET'：JSON.stringify（process.env.APISECRET | | |'mydevapise

如果有模块foo别名为foo：bar，那么我是否可以使用原始（无别名）的foo模块进行另一种解析，例如，bizz：foo/bizz // webpack.config.js module.exports = { ... alias: { 'bizz': 'foo/bizz', 'foo': 'bar' } } webpack中似乎没有内置的解决方案 一种解决方案是使用path.resolve（） const path = require('path'); ...

我正在尝试使用，虽然单独运行webpack可以正常工作，但尝试运行无服务器webpack失败，原因是找不到模块。“/node/NodeTemplatePlugin” 我的serverless.yml文件如下： 服务：kamehameha 供应商： 名称：aws 运行时间：nodejs6.10 功能： getDeltas： 处理程序：bundle.getDelta 插件： -无服务器网页包确保在serverless.yml中的自定义部分的网页包配置中设置了includeModules:true

我正在尝试安装“react dnd”，并获得： +--反应-dnd@2.4.0`--未满足的对等依赖webpack@1| | 2 | | ^2.1.0-beta | | ^2.2.0-rc 巴别塔-loader@6.4.1需要一个同龄人webpack@1 || 2 || ^2.1.0-beta | | ^2.2.0-rc，但未安装 我的项目是使用汇总，而不是网页包，我不知道如何处理这个问题。 我的npm版本：4.1.2 my package.json： { "name": "newx",

在web应用程序中，我已经用“require”声明了一些包，并且webpack可以理解这些包： 三 三轨道控制 我就是这样使用它的： var THREE = require('three'); var OrbitControls = require('three-orbit-controls')(THREE); 要添加物理，我尝试添加library physijs网页： var PhysiJS = require('physijs-webpack')(THREE); 在“npm运行构建

我使用NodeJS和mocha网页包作为测试工具。然后我在终端中得到一个错误： ReferenceError: window is not defined ... 我在package.json中有： "scripts": { "tws": "mocha-webpack -r ./test/test*.js", "tw": "mocha-webpack --watch ./test/test*.js", }, 什么是问题和解决方案？我找到了解决方案。这是必要的 要安装jsd

我使用的是Laravel5.5，我试图用一些引导覆盖编译一个更少的文件 我的webpack.mix.js文件中包含以下内容： mix.js('resources/assets/js/app.js', 'public/js') .less('resources/assets/less/app.less', 'public/css').options({ processCssUrls: false }); app.less如下所示： @import "~boot

我有一个使用Webpack 4的项目，非常接近预执行样板回购，如下所示： 就像项目的设置一样，它使用ExtractTextPlugin并将“所有”输出CSS填充到style.CSS文件中。这很好，很漂亮，但在一些小边缘的情况下。如果你在短短的几秒钟内注意到一个笨拙的白色页面，那么CSS的加载速度似乎还不够快，另外，从性能角度来看，在页眉中设置内联重要CSS的样式更有意义。例如normalize.css和一些body属性 TL；DR：有没有办法将我的src/style/或normalize.css

我正在浏览Webpack4的文档，并试图从一个非常简单的配置中运行WebpackDev服务器 我已经安装了webpack dev server，并在我的webpack.config.js中为其添加了最低配置： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist/js'),

我正在使用Windows文档中的示例 非常简单： $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 当我运行npm install时，它会失败并出现错误： 1715 http fetch GET 200 https://registry.npmjs.org/loose-envify 1ms (from cache) 1716 silly fetch

我正在使用Webpack，它是Vue.js应用程序中的热模块替换（HMR）功能和Vuex。加载顺序如下所示： 用户从message-launch加载UI中单击共享链接，并点击一些内容的API 内容返回-初始化根目录的Vuex子模块，让我们调用它subA 初始化后-将UI转换到另一个页面，并使用getter显示subA中的一些数据 在正常情况下，每次都有效，但当我进行文件更改时，保存它们（触发HMR），Vuex子模块subA似乎会被重置-它在状态下的所有属性都设置为初始值 HMR如何与Vuex交互

我已经实现了CSS网格布局和CSS flexbox的网站样式。 我需要使用PostCSS插件autoprefixer来修改网格CSS样式，以便它在IE11中工作 在官方的github链接上，文档包含它与webpack的用法 所以 确实需要在我的angular应用程序中单独安装webpack。正如我所读到的，angular CLI在引擎盖下使用webpack 在angular应用程序中使用这些插件或老挝人的正确方式是什么 已经解释了如何在angular应用程序中使用webpack。所以，若我们需要

我需要在index.html文件中插入像${variable}这样的值。我使用的是html网页包插件，在我添加了这样一个值之前，一切都正常工作 这是一个将进入Marketo的文件，所以我需要能够在页面上的样式标签中使用类似的变量。这些变量不是javascript，但我认为这是一个javascript问题，所以我现在将它们放在一个脚本标记中，以帮助解决这个问题 index.html： <script> var x = "John" var y = `hello, ${x

从几年前开始，我就用Webpack编译我的JS和SASS。在此之前，我使用GULP进行SASS，编译速度非常快。 使用相同的JS/SASS代码和网页包，我的编译时间是。。。6秒。非常慢 以下是编译后的日志消息（webpack-w），仅修改SASS或JS： Hash: 0dd09b4f671dc58e7c36 Version: webpack 4.30.0 Time: 6319ms Built at: 2019-04-29 11:58:43

我有一些简单的代码如下： //src/common.js 让加法=（a，b）=>a+b 控制台日志（添加（2,6）） 但在Webpack处理后，一些代码被添加到输出中，文件大小增加到6.5kb左右： //dist/common.js !（t）c）e[r[r][r][r][r][r][r][r][r][r][r]{i:i:r，l：！1，出口：{{{}}；返回t[r][t{{{{{t}{{t{t{t{t{t}；t{{{{{t，l：{{{}}}；t[t[r，{}；t[t，{{}；t[t}；t}；t[

我是babel的新手，正在尝试将我的es6代码传输到IE11。但是当我在IE11中运行代码时，我得到了关于我的forEach代码的js错误。根据我所读的内容，我需要添加预设@babel/preset env。我把它添加到我的配置文件中，所以我不确定它为什么不传输那些forEach调用 const path = require('path'); module.exports = { entry: { setupForm: "./Scripts/es6/setupForm.

在我的Rails 6项目中，我添加了带有 纱线添加推送菜单 从 现在我可以在node modules文件夹中看到它，如push菜单。但是，当我尝试从包导入或包含时，如下所示： require("push-menu") 我得到以下错误： Uncaught Error: Cannot find module 'push-menu' at webpackMissingModule (application.js:12) at Module../app/javascript/packs/applica

我开发了一个用于其他项目的组件库，我使用了使用较少的Ant Design库，我在我的组件项目中使用了Sass，我试图将所有的less和Sass文件捆绑到一个单独的Sass文件中，但是我在Sass中有一些变量，我想在其他项目中使用，所以我不想在scss中转换最终的文件 我已经试过使用，但我注意到webpack总是用css转换我的文件 这是我的网页配置： const path = require('path'); const CleanWebpackPlugin = require('clean-w

我正在将一个使用grunt的项目转移到webpack 我经常使用HTML片段在各种文件中重用HTML组件 对于不需要传递变量的HTML包含，我正在使用WebpackHTML加载程序 对于那些这样做，我使用胡子和html加载器一起 这在顶层运行良好，但不是递归的，因此包含另一个代码段的代码段只显示包含代码，而不是插入的HTML 演示的最简单方法是创建一个简单的回购协议，以演示问题： 我的HTML模板是： 开始 前两个Include导入时没有问题 第三个是recursive.html，看起来像

我想创建一个NuxtJS模块，该模块生成并绑定一个自定义脚本，并将其放置在static/my script.js中 我当前的文件夹结构如下： - modules/ - my-module/ - index.js - plugin.js - my-script.js - nuxt.config.js (contains buildModules: ['~/modules/my-module']) 我想将myscript.js作为一个单独的、独立的js包构建并捆绑

我将copy webpack plugin从4.6.0升级到6.0.2 我把代码从 plugins: [ new CopyWebpackPlugin([{ from: clientAssetPath, to: paths.STATICS, ignore: [ '.gitkeep' ], }], { debug: 'info' }), new HtmlWebpackPlugin({ ...htmlPlugi

我想将style.scs编译成style.min.css，在此过程中应用AutoRefixer和sourcemaps。 使用脚本，我将执行以下操作： "scripts": { "sass": "sass src/css/style.scss dist/style.css", "postsass": "postcss dist/style.css --use autoprefixer -r&q

我在运行时用动态公共路径替换cdn加载字体时遇到问题。所以我有这样的想法： vue.config.js文件 chainWebpack: config => { config.module .rule('fonts') .use('file-loader') .loader('file-loader') .options({ emitFile: tr

下面的别名在HTML标记或JavaScript中不起作用，有什么原因吗 在我的网页包配置文件中： resolve: { alias: { '~': path.resolve(__dirname, './src/') } }, ... ... ... { test: /\.(png|svg|jpg|gif|ico)$/, use: [ { loader: 'file-loader', opti

我正在使用laravel mix criticalcss扩展名生成一个HTML文件。编译完该文件后，我需要在HTML文件源代码中运行查找和替换，以将URL从相对重写为绝对。我尝试使用laravel mix-string-replace，它使用string-replace-loader，，但这种替换从未发生过。我一定是在网页的工作方式上遗漏了什么。我错过了什么 const mix = require('laravel-mix'); const glob = require("glob&q

我正在尝试将Nextjs应用程序从Webpack4升级到Webpack5。 目前，我在next.config.js中使用带有选项的文件加载程序： // next.config.js module.exports = { module: { rules: [ { test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/, use: [ {

我使用webpack simple选项生成了一个Vue应用程序。我正试图向https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en但我得到了一个错误： 无法加载XMLHttpRequest https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en。 对飞行前请求的响应未通过访问控制检查：否 “Access Control Al

我正在尝试使用以下软件包创建monorepo： 使用create react app创建的web应用 盖茨比遗址 web应用程序和gatsby应用程序将共享的组件库等（这是我使用monorepo的主要原因） 到目前为止，我无法设置react应用程序和盖茨比网站都可以运行。 为了显示问题，我设置了一个，仅使用以下软件包： cra使用create react应用程序创建 gat用新gat创建的GATSBhttps://github.com/gatsbyjs/gatsby-starter-def

如上面所示，我们有两种方法从cli将变量传递到webpack config。 但是，这两种方法的优缺点是什么？第一种方法和第二种方法应该在什么情况下使用？NODE_ENV=production webpack-您只需在控制台中创建一个变量，然后尝试通过process object从NODE.js访问此变量，因此此变量不是NODE.js流程的一部分 webpack-env.foo=bar-您可以将变量直接传递给node.js进程，这样您就可以像env.foo一样直接访问它 第一种方法适用于传递全局

我在尝试修复反应传单/传单期望定义窗口并导致盖茨比构建npm运行构建失败时遇到问题 错误消息： WebpackError: window is not defined - leaflet-src.js:230 ~/leaflet/dist/leaflet-src.js:230:1 - leaflet-src.js:7 version ~/leaflet/dist/leaflet-src.js:7:1 - leaflet-src.js:10 Object.expo

我正在将一个使用webpack的项目从v4升级到v5，虽然它现在编译无误（经过一些最小的调整），但我注意到输出格式有很大的不同。在v4下，它的外部结构如下： （功能（模块）{ ... }); 而现在在v5中，它的结构如下： （（）=>{ ... })(); 我认为这会导致在我们的项目中使用输出的特定方式出现问题（具体来说，后者似乎被调用，但前者似乎没有） 是否有更改v5中默认输出的设置 我试图查看文档中的output.iife（无效果）和其他内容，但没有看到我认为合适的内容。我肯定我错过了一