我在我的Webpack应用程序中有一些JSON是在构建时创建的-在构建过程中有没有任何方法可以用路径“注入”它？我知道我可以把它写到一个文件中，并以这种方式包含它，但我希望我能做一些更干净的事情。编辑2020/10/27：是一个可以做到这一点并与webpack 5兼容的项目 Edit 2018/04/09：是在构建时实现注入代码和值的另一种方法，但它需要从单独的文件加载该代码，如果该文件仅存在于内存中，则可能无法访问OP设置中的JSON数据 我也在寻找这样做的方法。最后，我深入研究了webpac

我填充网页就像我在做什么错误的网页，因为它需要这么多的时间来建立。我不会要求你检查整个网页配置并为我找到一个问题的地方，但是 如果你能推荐一些实践来测试生产力，那就太好了 我在网上发现的唯一一件事是一篇完成了一半的文章 UPD： （归功于@daniel Protopov）您的建议如何？谢谢您的指点！我与您一起工作，没有任何性能问题。也许你也可以用它？

我真的很难理解我应该把图像/字体放在哪里与webpack一起使用，这样它们才能正确地捆绑在一起，以及如何在我的CSS中使用url（） 我的网页配置说 entry: ['./main.js',], output: { path: path.resolve(__dirname, './public/dist'), publicPath: '/dist/', }, 它告诉我事情应该在哪里结束，而不是从哪里来。我猜是加载程序的工作，在项目中的任何地方找到文件并将其复制到那里。我有一个图

如何配置Webpack DevTools工作区？ 最近我开始开发一个网页包 在编译之前，已经通过ruby（控制台）和开发工具Chrome Canary、SCSS/CSS文件以及本地保存并更新的sourcemap文件进行了编译。 屏幕开发工具Chrome： prntscr.com/cgxr6z 问题: 我们需要一个详细的动作算法。 如何使开发工具金丝雀能够立即显示SCSS/JS文件中的更改，而不是在重新加载整个页面之后 （谢谢你的帮助） 配置网页包： var webpack = require('

我想知道如何指导我的网页配置为开发和生产模式运行不同的源代码映射 事实上，我只是对我不想要的一个进行了注释，这显然很不方便，我希望根据我正在运行的npm脚本（生产服务器或webpack dev服务器）动态地做出这个决定 我已经有了一个对应于开发模式的变量（constdebug），但我不确定如何在配置中使用它来确定不同的源映射 这是我当前的配置 Webpack.config.js const debug = process.env.NODE_ENV !== "production"; con

我们有一个本机部署的Ionic 2应用程序，也可以部署到web上。构建时，我使用npm运行build--prod--release。这只是包装了爱奥尼亚的产品。 我正在尝试更新我们的构建过程，以便能够替换index.html中的默认main.js. 因此，我希望能够从以下位置更改此文件： <script src="build/main.js"></script> 当我构建时，我可以看到它正确地生成了源文件，但在完成爱奥尼亚构建后不久失败，并显示一条消息，说它找不到bui

我最近将webpack升级到v2.x。其中一个装载机发出以下警告： Trace: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions() in the next major v

版本：网页2.3.3 你好 我正在尝试使用Vuejs构建我的第一个Electron应用程序。在我开始打包应用程序之前，一切似乎都很顺利 当我运行npm-run-dev时，一切正常 但是，当我运行npm build:darwin时，我得到以下错误 UglifyJs中renderer.js中的错误 意外的令牌punc«（»，预期的punc«：»[renderer.js:26813,14] 但是，当我运行应用程序时，它最终会被编译成死亡的白色屏幕 据我所知，这可能是因为Uglifyjs不编译ES6，但

我正在使用clean webpack plugin在构建之前删除/dist文件夹，并且只有在编译阶段Flow成功时才删除 我的问题是，即使流抛出错误，clean插件也会运行 这是否可以解决这个问题（我的意思是当出现编译错误时，不要删除“dist”文件夹） ./src/app.js function init(a: number) { //... } init("2"); ./webpack.config.json const path = require("path"); const

我正在做教程。我已经到了要求我安装webpack的地步，但当我使用： npm install --save-dev webpack 我得到以下错误： 网页包开发-server@2.5.0需要webpack@^2.2.0的对等方，但无 已安装 有什么想法吗？我也在从那个教程中学习。就像错误所说的那样，您有webpack dev-server@2.5.0但您缺少匹配版本的webpack。如果您检查package.json，那么您会发现webpack版本不同（可能是3.0.0？） 因此，请安装web

我需要在一个文件中创建所有文件。 我写的网页将从我无法访问相对（和绝对）路径的地方提供。 所以我需要把js放在index.html文件中，放在标记之间 我从vue网页包模板开始，将其修改为，所以我只有两个文件-js和html文件。 我可以使用sed等自动化它，但是有更好的方法吗？你可以使用webpack插件，或者 html网页包插件和提取文本网页包插件方式 网页包配置： module.exports = { entry: { A: './a', B: './b', },

我有一个相当小的脚本，可以控制模式中的旋转木马。要启动模式，我有一个简单的showModal（）函数，当单击页面上的图像时会调用该函数。 然而，当Web包处理JS文件时，UglifyJS正在剥离此功能。以下是代码的简化概要： $('#iconified').on('keyup', function() { var input = $(this); input.addClass('empty'); }); var carouselVideoPlayer = (function() { var i

我正在使用vue cli网页包，由于CORS相关问题，我需要在webdev服务器上设置一个自定义域以连接到API。我怎样才能做到这一点？在后端数据库中输入localhost:8080无效。 提前感谢：）创建或编辑projectRootDir/vue.config.js文件： module.exports: { configureWebpack: { devServer: { host: 'mycustomdomain', p

我把我的问题归结为最低限度的测试。我有一个App.js文件，其中包含一些jsx，将被编译成/bundle.js： // App.js module.exports = () => <div/> 当我为加载程序指定一个include时，我不知道为什么它会失败，甚至include:[]也会失败，并出现相同的错误 有人有想法吗？包括就像是测试 include:[]表示“不包含任何内容”` include:[“/include”]表示“仅包括include目录中的文件” 因此，如

我已经看到了创建新编译器实例的两个版本 let config = {target: 'web', /* more config */ }; // Version A let compiler = new Webpack(); compiler.options = config; // Version B let compiler = Webpack(config); 有区别吗？是的，确实有区别 如果你看一下，你会注意到webpack函数有两个参数 一个是选项，第二个是回调 在我所附的显

我一直在搜索与.babelrc中的预设键相关的答案。有人能给我解释一下“env”、“stage-0”、“es2015”等是什么意思吗？ 如果我能知道设置预设的更好方法，那就太好了 所以我读了一些书，这里是我要知道的 在您的网页包中，当babel loader用作.jsx文件的转换器时，它将调用您的.babelrc文件。在网页包中，您可以使用options属性将选项传递给加载程序。 此加载器还支持其他加载器特定选项： 1） 缓存目录 2） 缓存标识符 3） 巴别塔 谈到babelrc，babel

在webpack.config.js中，在output.filename中，我看到了方括号。这是什么意思？使用它和纯文本有什么区别 output: { filename: '[name].js', // Webpack dev middleware, if enabled, handles requests for this URL prefix publicPath: 'dist/' }, 这些是Webpack将用其实际值替换的占位符 您可以在官方文档中了解更多信息

我这里有两张图片： 在Google Chrome Inspector网络选项卡的第一个图像中，每个图像有两个操作，原因是什么 从缓存中提取 来自服务器的XHR 这是否意味着每次加载此页面时，我都会重新下载文件？应用程序是否应该只引用缓存并仅在文件更新时下载 我是否必须配置webpack，以便我的资产在其名称中使用哈希，以帮助进行版本控制，如.js文件 编辑： 这是在开发模式下，或者您正在使用的webpack dev server，它将立即从缓存中响应，但会自动执行fetch（）“在后台”以确

我正在尝试使用webpack进行一些看起来非常基本的操作：将.pug和.scss文件与从Javascript导入，并使用提取加载程序和文件加载程序导出相应的.html和.css 为了便于复制/演示，我在此处创建了回购协议： 最小的Web包配置非常简单，如下所示： const path = require('path') module.exports = { output: { filename: 'app.js' }, entry: path.join(__dirname, 'inde

只是用webpack设置了我的一个项目，第一次使用它，所以我只是想了解一下 基本上，我已经将SCSS编译成CSS，但之前我使用grunt时，有一个sourcemap设置，如果您正在检查元素，它会显示该元素是从哪个.SCSS文件中提取的，即使它被编译成CSS文件 这是我的网页配置： var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); module.exports = { mo

我正在开始使用Webpack 我安装了webpack@4.17.1 我让它生成组合的js和css文件，并移动img文件 当我运行webpack时，我得到 pub/bld/ ├── css │   └── common.css ├── img │   └── image.jpg └── js    └── common.js 现在我想生成manifest.json 我安装了网页包清单-plugin@2.0.3 我配置了 const ManifestPlugin = require('webpa

我和React一起工作。启动我的网页包生成时，我的控制台返回： ./src/index.js中出现错误 Module build failed (from ../node_modules/babel-loader/lib/index.js): Error: Must export a default export when using ES6 modules. 这里是我的.lrc文件： { "presets": ["module:@babel/core", "@babel/preset-

我有一个大型主干/requirejs应用程序，我想迁移到webpack，最新的“webpack”：“^4.27.1”，但我遇到了一个无法解决的错误 我一直在看Dodss的文件和视频- 我当前的webpack.config.js文件如下所示： var path = require('path'); module.exports = { mode: 'development', context: path.resolve(__dirname), entry: {

这是我在Redux应用程序中的一行： export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(MyComponent) 我应该安装什么来修复此问题 我的package.json依赖项： "dependencies": { "axios": "^0.16.2", "babel-core": "^6.26.0", "babel-loader": "^7.

我正在网页包中使用HtmlWebpackPlugin，下面是它的配置： new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: 'body', sdk: '/mylib.js' }) 在我的html中，我将script标记定义为： <script src="<%= htmlWebpackPlugin.op

希望运行webpack，在使用mini css extract插件后在html文件的头中创建适当的样式表链接——类似于html webpack插件如何将适当的JS包（脚本标记）添加到html中。有没有可能让webpack+插件这样做，或者我必须手动粘贴样式表标签（在html模板中） 运行webpack 4.28我相信这个webpack配置应该可以解决您的问题 const path=require（'path'）； const MiniCssExtractPlugin=require（'mini-

我使用Webpack4和字体Awesone5（FA） 当我按如下方式导入FA时： @import '~@fortawesome/fontawesome-free/css/all.css'; 图标显示此级别上的： http://some.com https://some.com/first/ 和未在下一个站点级别显示： 1. https://some.com/first/next/ 2. https://some.com/first/next/level 当我在Chrome devtools

当我们转而使用Webpack来处理SASS文件时，我们注意到在某些情况下，我们的构建时间变得非常缓慢。在使用测量了构建的不同部分的性能之后，似乎是罪魁祸首…构建很容易需要10秒（在我们进行一些修复之前，通常需要20秒），这比我们希望的要长 我很好奇，人们是否有其他策略来优化构建Sass资产，而我没有涉及这些策略。在这一点上，我已经经历了很多次了（其中一些已经经历了多次），但似乎仍然无法将构建时间降低到足够低的程度。就目标而言，目前一次大型重建（例如对许多文件中使用的组件进行更改）很容易需要10-

我似乎不知道如何使用Webpacker调用Rails 6中的函数。如果在控制台中调用它们，我会得到一条消息，即函数未定义。 如何调用这些函数？还是有一个很好的理由我不应该这样做 最简单的问题是： 在application.js中，我有一个名为something的函数 # app/javascripts/packs/application.js function something() { console.log("something") } $(document).on("turboli

我在CSS中使用了连字号命名约定，CRA的开箱即用CSS模块不会在JS文件中将其转换为camelCase。这迫使我使用括号语法，例如，样式[“我的类”]，这很糟糕className={styles.myClass}可读性更强，更易于使用 有没有办法在不弹出或使用重新布线的反应应用程序的情况下更改此设置？我不喜欢在CSS中使用驼峰框，但这是我最后的选择

我正在使用webpack制作cms模板 在一些css文件中，我使用了一些图像，比如backgroundimage:url（'../images/space bg.jpg'） 所有图像都在webpack文件夹中，我希望webpack将它们推送到公用文件夹 现在，我在index.js文件中使用了一些硬编码规则，如import'../images/space bg.jpg' 但我想知道是否有办法自动处理它们 这是我的webpack.config.js： var path = require('path

我正在配置imagemin-webp-webpack插件以将我src/assets/images中的所有.png和.jpg图像转换为dist/assets/images。当我运行build命令时，转换成功。所有图像都已转换为webp并分发到dist/assets/images。我认为“这很简单”，是时候在我的src/index.html文件中创建标记来开始引用了。webp图像： src/index.html: ... ... 当我再次npm运行build时，这次我得到了： ./src/in

在我的项目中，我正在从node_模块包导入第三方css文件： @import（~codedoc/src/css/style.css） 导入的css文件具有图像的相对路径，如下所示： 背景图像：url（../images/icon info.png） 我在构建时遇到以下错误： Error: Can't resolve '../images/icon-info.png' 我在我的webpack.config.js中使用以下模块规则： module: { rules: [

为此，我遵循以下原则。但在尝试构建捆绑包时，它告诉我以下错误： ERROR in ./src/index.js 2:14 Module parse failed: Unexpected token (2:14) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.or

网页包v4.42.0 我试图让webpack在html img标记中提取我的图像资产，但它似乎不尊重我的webpack解析别名。据我在其他帖子上看到的，我应该能够在字符串前面加上~字符，但它似乎不适合我 我得到以下错误：错误：找不到模块'@assets/img/avatar\u default.jpg' 这项工作（相对路径）： 和我的html加载程序配置： { loader: 'html-loader', options: { minimize: false,

我在一个使用webpack和grunt的站点上有多个子页面。这是我在Grunfile.js中的网页包配置 我想使用webpack来处理所有子页面JS文件 webpack: { dev: { entry: { test: "./src/js/test.js", index: "./src/js/index.js", }, output: {

在使用webpack时，为多页应用程序生成bundes的一个常见要求是将公共模块和第三方模块分开捆绑 我已经用javascript源代码实现了但是，不使用样式源 这是我的回购样本：它是什么 演示项目有两个入口点：主页和分类。 我使用extract text webpack plugin和CommonChunksPlugin来拆分捆绑包 我设法生成js块（vendor.jshome.jscatagory.jscommons.js）和css块（catagory.css，home.css，common

我在使用UglifyJS时遇到一些问题。 当我将uglifyjs与此命令一起使用时： uglifyjs-o live\u ught.js--compress--mangle props 1--mangle-r“$，require，exports”live.js 我给我一个错误：无法读取未定义的属性“source” 此行的代码是：newregexp（this.Qd.source++“|”++/\d{1,2}/.source） uglify前面的代码是：newregexp（this._ordinal

我刚刚开始使用webpack，需要传输并捆绑一个TypeScript应用程序。在这个应用程序中，我有几个到其他类的导入，我希望这些导入包含在一个单独的输出js文件中 我的配置文件如下所示： var path = require('path'); module.exports = { devtool: 'source-map', devServer: { inline: true, }, entry: { vendor: ["./main"] }, module: { l

目前，我必须在每个sass文件中添加以下声明： @import '../src/styles/index'; 我的sass文件通常与我的组件位于同一文件夹中，因此相对路径在很多时候都会不同 是否仍然可以使用Web包添加导入，而无需在每个文件中声明导入？您可能需要更改.scss文件中导入的顺序 让我给你举个例子。变量也需要在其他每个.scss文件中可用。我设置样式的方法是导入main index.scss中的所有.scss部分。index.scss中导入的第一个部分只是一个包含所有变量的文件。这

就图像而言，我想做同样的事情，即动态加载依赖项 我成功地做到了这一点，我设置了我的网页配置，添加了babel运行时转换器babel-preset-stage-0，以便使用async/await。一切顺利 但是 一旦我用一个选项{async:true}设置了我的webpack配置和它的CommonChunkPlugin，我的产品包就加载了+800KB的代码

我正在开发一个应用程序，它使用angular 4，捆绑由webpack完成 我能够正确地捆绑所有的js文件。但是当我尝试使用文件加载器复制html文件时。它不工作，并且没有将其复制到输出文件夹中 请找到我的webpack.config.js文件 var webpack = require("webpack"); var HtmlWebpackPlugin = require("html-webpack-plugin"); var ExtractTextPlugin = require("extr

我真的很难让触控笔CSS预处理器与当前版本的Webpack一起工作。以下是我的尝试： webpack.config.js： var path = require("path"); module.exports = { entry: './src/app.js', output: { filename: 'mwe.js', path: path.resolve(__dirname, 'dist') }, module: {

我正在将一个使用requirejs的现有网站迁移到webpack。我想我可以用webpack.config.js替换requirejs配置并完成它。然而，webpack不包括任何AMD模块所需的任何依赖项。我的所有模块的形式如下： define（require=>{ const dep1=require（'models/dep1'）； const dep2=require（'models/dep2'）； ... 常量Utils={ 函数doStuff（）{ ... }, }; 返回UTIL； }

我正在将一个较大的项目转换为webpack，并且遇到了一个构建错误（事实上，不同的错误取决于我如何尝试解决）。我还不是超级熟练的webpack，我希望能得到一些帮助，了解这些问题的典型解决方案 某些依赖项之间似乎存在冲突： "@babel/core": "^7.0.0-beta.42", "@babel/preset-env": "^7.0.0-beta.42", "backbone.radio": "2.0.0", 网页包投诉：找不到模块“babel-preset-es2015”。看起来ba

我在将mapbox gl和@mapbox/mapbox gl draw包含在网页包捆绑应用程序中时遇到问题。我发现映射框应该包含在dist版本中，所以我需要这样：require（'mapbox-gl/dist/mapbox gl.js'）（与Draw相同），它在开发中工作正常，但在生产构建时崩溃，我们会遇到一些错误，例如e未定义 需要配置吗？好的，我找到了解决方案，发布在不同的问题上。 首先，为了简单起见，我们可以使用mapbox和mapbox gl的常规要求，使用： const mapboxg

在某些情况下，我不想在Webpack4中使用WebpackTransform进行动态导入 我们可以通过一些选择来做到这一点吗 async componentDidMount() { const { default: Greeting } = await import("/components/Greeting.js"); this.setState({ component: Greeting }); } 此/components/Greeting.js在服务器上预编译。在chrome中

我有一个节点脚本，它多次使用fs.readFileSync读取文件系统上存在的各种JSON5配置文件。根据环境变量中的某些标准，这些变量被读入、组合、操作、附加到等。此文件的输出是通过模块导出的JavaScript对象 我希望每次运行我的Webpack构建过程和捆绑包中提供的输出JS对象时都对该脚本进行评估，这样当我的客户机响应脚本时，就可以从“config”导入{foo，bar}，客户端代码可以访问这些值 这似乎是装载机可以解决的问题，但我一直无法让它们中的任何一个工作 如何在Webpack编

我的next.config.js如下所示： import path from 'path'; import glob from 'glob'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; import webpack from 'webpack'; import dotenv from 'dotenv'; import OptimizeCSSAssetsPlugin from 'optimize-css-assets-

我正在建立一个新的web项目，其中涉及到相当多的SCSS文件。我设置了一个手表，这样每当我更改SCSS文件时，代码都会自动重新编译，这样我就可以刷新页面并查看更改。我的问题是，重新编译代码和查看更改大约需要45秒。我怎样才能解决这个问题 我试着在网上查了几篇文章，但都没有找到解决办法。我对使用webpack相当陌生，所以我不熟悉所有的插件等。我曾尝试关闭源代码映射，但我确实需要这些，这并没有将编译速度提高很多。sass/index.scss的速度似乎在放缓 index.scss @import