“我的网页”入口点的名称中包含一个[hash]： entry: "index.js", output: { path: "build/", filename: "index-[hash].js", } 如何从应用程序的HTML直接链接到该入口点 例如，我希望发送到客户端的HTML包括： <script src="build/index-41d40fe7b20ba1dce81f.js"></script> 我该怎么做？是否有一个插件可以生成入口点清单

我第一次尝试从systemjs迁移到webpack。在我的应用程序中，我有如下内容： import {appSettings} from "AppSettings"; 其中AppSettings只是一个带有常量的文件，实际上不是一个模块： export const appSettings = { somethings: { } }; 这适用于systemjs，而不是webpack。我能做些什么来解决这个问题？如果您试图导入您自己的模块，您应该使

更新-相关： 我让网页包编译一个简单的module.exports=“asdfasdf”到foo.js 在节点server.js中，我有var foo=require（“./foo.js”） 当我console.log（foo）时，我得到一个空对象{} 我做错了什么 我的网页包配置： module.exports = { entry: "./test.js", output: { filename: "./foo.js" }, target: "

我正在尝试使用webpack构建react项目，但由于webpack.config.js中存在一些错误或问题，因此未创建bundle.js。应用程序目录如下所示。 应用程序目录结构 =>公共 --脚本 --客户 --client.js --组件 --App.js --index.html =>服务器 --server.js =>webpack.config.js 下面是代码： webpack.config.js var webpack=require（'webpack'）； var pathr

我试图使用UglifyJS破坏我的代码。 我包括的库有（一些）Ramda、React、下划线、React-select 但是，当我破坏代码时，在RamdaJS的“输出”部分，它给出了错误： First argument to arity must be a non-negative integer no grater than ten 我在webpack中使用的uglifyjs配置是： new webpack.optimize.UglifyJsPlugin({ //includ

我正在编写一个Angular1.5.x应用程序，其中的组件嵌入了自己的风格。组件定义了一个线性渐变背景，该背景在Firefox上运行良好，但需要Chromium中的供应商前缀。以下是我迄今为止所做的工作： 要求 工作部件 已安装的postss加载程序： yarn add --dev postcss-loader 将browserslist添加到package.json： "browserslist": [ "> 1%", "last 2 versions", "

我的网页包配置看起来很像这样- entry: { main: './src/lib/bootstrap.ts', sw: './src/sw/sw-bootstrap.ts' }, output: { path: path.resolve(__dirname, 'public'), filename: '[name]-[chunkhash].js' } 在我的情况下，我希望sw引导不会附加chunkhash。您可以通过结合使用Webpack的Co

我正在使用webpackhtml插件生成一个单页静态网站。我正在尝试为静态资产（尤其是图像）实现缓存破坏。我还有一个用于打开图形图像的元标记，如下所示 我的webpack.config.js大致如下： module.exports = { entry: './src/init.js', output: { path: './build', filename: 'bundle.js', }, module: { loaders: [{ tes

我正在使用commonchunkplugin拆分我的供应商包。我还有ExtractTextPlugin将CSS提取到一个文件中。但是，出于某种原因，我也得到了vendor.css 这是我的网页配置： const config = { output: { publicPath: '/blaze-assets/', }, cache: isDebug, stats: { colors: true, reasons: isDebug, hash: i

档案： package.json { "main": "./src/index.js", "scripts": { "start": "webpack --display-error-details --config ./webpack-config.js" }, "devDependencies": { "webpack": "^3.0.0" }, "dependencies": { "simple-oauth2": "^1.2.0" } }

我有一个reactjs和redux项目，它使用webpack，并使用Dockerfile构建。这是一个具有某些以前配置的锅炉板，您可以通过克隆此repo来获取文件： 因此，为了运行react服务器，我创建了一个docker-compose.yml文件： version: '2' services: frontend: image: redux container_name: redux environment: - NODE_ENV=developmen

在Webpack中运行“npm run build”生成项目时，html文件不会复制到dist目录中 根据下面的堆栈溢出线程，这种行为似乎是正常的，并且有几个变通方法可以自动执行此过程，如公认的答案中所述 然而，我的问题是为什么Webpack不通过设计捆绑html文件（以及JavaScript和CSS文件），因为这似乎是一个微不足道的功能，我希望它作为一个Webpack新手能够完成。我刚刚读了文章，connexo是对的-Webpack捆绑源代码和资产，不是他们称之为分发代码的html文件。谢谢

我想用Laravel Mix编译的文件少了一些。然而，它在谷歌字体导入时崩溃了 这项进口： @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700); @import url(https://fonts.googleapis.com/css?family=Karla:400,700); @import url(https://fonts.googleapis.com/css?family=Rancho)

我的申请有问题。我有一个网站。我使用date fns显示基于用户语言的格式化日期 它工作得很好，但我已经更新了日期fns，从那以后我有一个警告。在我的JavaScript代码中，我使用： const locale=require（`date fns/locale/${props.match.params.lang}`） 有了它，我可以生成如下格式： 格式（新日期（），'D MMMM YYYY'，{locale}） 它是有效的，但我不喜欢这个警告，我得到的网页是建设。你能帮我理解我的代码有什么

我正在尝试为一个API键设置一个环境变量，我不想在代码中使用它。我的源javascript如下所示： .get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`) 我正在使用webpack和包dotenv webpack在gitignored.env文件中设置API_密钥，并且在我的本地计算机上运行良好。我还希望在通过Netlify部署时能够设置该变量，我已经尝试通过GUI将其添加到“build environ

我的webpack配置文件有一个指向dist文件夹的publicPath设置，但是当我运行 webpack-dev-server 将提供来自项目根目录的index.html。当我将index.html从根目录移动到dist文件夹时，我只在浏览器中看到一个目录视图 我的目录 index.html src game.ts dist bundle.js 如何告诉webpack我的index.html也在dist文件夹中？为什么webpack会使用dist文件夹之外的任何东西 var pat

我尝试翻译fr中的tinymce vue组件。我的代码： <editor id="test" :init="{ selector: '#test', language_url: '/static/fr_FR.js' }" :initial-value="div.data.inputTextarea" api-key="[my-api-key]" @input="updateTiny" v-model="tinyHTML"></editor> 我看到了tinymce文

引发“无法设置未定义的属性“dir”错误 gem'ckeditor'，“~>5.0” 截至目前，ckeditor gem版本5实际上包含ckeditor-4 还有一个基于webpack本身的ckeditor-5，可以直接放入rails-6webpack，而不需要gem OTOH，虽然这可能是一种更适合未来的方法，但ckeditor-5在许多方面有所不同，可能适合您的需要，也可能不适合您的需要。截至目前，ckeditor gem版本5实际上包含ckeditor-4 还有一个基于webpack本身的

。引用：“我正试图在一个使用webpack的非下一个js项目中复制此功能” 在我的例子中（见下面的代码），我在next.js中使用。我希望将编译后的service.worker.js文件作为公用文件夹提供服务。但是在我的例子中，service.worker.ts文件在public/文件夹之外。而且它是先用网页包编译的 我应该将编译的service.worker.ts文件的结果放在哪里？目标是能够在mydomain.com/service.worker.js访问它。也许我使用了错误的配置？也许应

我添加了以下加载配置： config.module.rules.unshift({ 测试：/\.svg$/,， 使用：{ 加载器：“文件加载器”， 选项：{ esModule:false， 名称：'[name]-[hash].[ext]',， outputPath:'静态/图像'， }, }, }); 这将生成预期的文件： ❯ ls -l .next/static/images/*-*.svg -rw-r--r-- 1 gajus staff 2755 Oct 11 19:05 .nex

我想卸载webpack 4.44.1。关于这个的SO帖子对我不起作用。当我跑步时： > npm uninstall -g webpack@4.44.1 up to date in 0.134s npm list -g webpack@4.44.1 npm ls 然后当我跑步时： > npm uninstall -g webpack@4.44.1 up to date in 0.134s npm list -g webpack@4.44.1 npm ls 它表明： C:\U

通过Fable和webpack.config.js，我看到了一些本地用户的devServerPort与CI系统使用的端口不同的情况。我想知道是否有一种处理本地配置的标准方法或内置方法，比如使用只覆盖一个特定值的webpack.local.config.js 然后，每个程序员都有自己的本地配置，它不进入repo，您可以覆盖默认webpack.config.jsconfig变量中指定的任何共享值 简单的替代方法是，在每次repo同步后，只需要使用不同的完整配置，或者只在本地更新端口号，但这显然并不理

我曾尝试将最新版本的saxon js与webpack一起用作模块绑定器，但尝试构建绑定会产生错误。Saxon js是使用npm安装的 我使用以下代码导入了saxon js： import * as SaxonJS from 'saxon-js'; 以及 import SaxonJS from 'saxon-js'; 尝试以这种方式导入saxon js时，webpack会产生以下错误： Module not found: Error: Can't resolve 'stream' in '/U

我想把版本号和版本信息注入到我的项目中，因为它是用webpack构建的。例如，我的代码可以执行以下操作： var buildInfo = require("build-info"); 在生成时生成生成信息模块的最佳方法是什么？您可以使用将生成信息与代码内联的： 配置 new webpack.DefinePlugin({ __VERSION__: JSON.stringify('12345') }) 应用程序代码 console.log(__VERSION__); 我分发了两个文件，从

我正在将我的木偶应用程序从requirejs切换到Webpack，在经历了很多问题后，我几乎做到了，但有一件事我就是想不出来：如何引导我的应用程序 对于requirejs，我刚刚重新划分了一个全局变量var-app我在其中存储我的主木偶.Application对象，以便我可以从其他文件访问它 但是，Webpack将此从窗口更改为当前模块，因此我的var应用程序突然不再是全局的 我试着将它们全部分配到window：window.app但我仍然无法从其他模块访问它们 我上一次尝试使用的是Provid

当像这样运行webpack dev服务器时： webpack-dev-server --config ./webpack.config.dev.js devServer: { stats: { chunks: false }, }, 终端将像这样的控制台，很多控制台。 如何忽略节点_模块 bundle.js 4.11 MB 0 [emitted] main chunk {0} bundle.js (main) 1.43 MB [rendered]

如何使用webpack填充例如Promise。向require（'q'）提供plugin。Promise // attempt: plugins: [ new webpack.ProvidePlugin({ Promise: 'q.Promise' }) ] 在webpack.config.js中填充$： plugins: [ new webpack.ProvidePlugin({ '$': 'jquery' }) ] 使用q.Promise，shimmigPromise的等价物是什么 //

如何配置Babel和Webpack以在一个项目中加载ES6源代码和ES5供应商库，例如jQuery和我们的旧库javascript文件？它们都有相同的*.js扩展名 { test: /\.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ }, 上述加载程序将正确加载ES6，但将所有js文件视为ES6。ES5中的旧lib js文件怎么样 以下是我的.babelrc文件：

我现在有了最简单的项目结构： root |-src --|index.pug --|--styles.css --|--app.js |-public --|--img 套餐： "devDependencies": { "css-loader": "^0.26.1", "html-loader": "^0.4.4", "html-webpack-plugin": "^2.26.0", "pug": "^2.0.

如何更改或添加前缀到src路径或背景：url（“此处需要前缀”\uuuuu/file.jpg“>，从my webpack.config开始）？ 如何为特定文件启用前缀？ `

运行webpack时，我有下一个webpack 2规则配置，并抛出下一个错误： Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @media screen and (min-width: 40em) { | .feature { | margin-bottom: 8.75rem; @ ./~/style-loader?{"camelCase":

我正在使用一个作为umd模块分发的库，我正在导入的一个文件中的代码如下所示 lib.js (function (global, factory) { if (typeof define === "function" && define.amd) { define(['exports', '../utils/require-isdefined-plugin!lodash'], factory); } else if (typeof exports !

我使用以下npm命令启动我的webpack sev服务器： "start": "webpack-dev-server --progress --colors --port 8090 --open -d --inline --output-pathinfo" 在我的网页配置中，我还有： devtool: 'source-map' 但据我所知，这并不重要，因为-d选项无论如何都会将devtool设置为sourcemap 运行后，我可以在sources选项卡（Chrome）下看到各个JS文件：

使用相同的webpack.config.js，webpack dev server在启动时运行一次编译，但是我的webpack dev中间件安装程序在启动时立即编译两次 我在chokidar中添加了一些日志记录，以确保文件更改不会发生，而且看起来不会发生。关于如何判断是什么触发了第二次编译，你有什么想法吗？我的文件监视日志放错地方了。实际上，我在启动dev服务器之前就开始了文件更改。我不知道如何使它不那么敏感，但那是另一个问题 为了子孙后代，为了添加日志以了解发生了什么变化，我手动编辑了node

当我尝试使用index.ejs模板文件构建html webpack插件时，抛出以下错误： 即使我尝试加载为.html文件或安装ejs加载程序，仍然会失败。我不确定ejs loader是否安装了html网页包插件 其他一些人也有同样的问题，但他们的网页版本是@1，该链接上的解决方案对我不起作用 错误 ./node_modules/html网页包插件/lib/loader.js/src/index.ejs <!DOCTYPE html> <html> <head&

我在Adobe新的Animate CC中创建了一个动画，并将其导出为.mp4文件 在我的webpack.config.js文件中，我声明应使用文件加载器加载我的.mp4文件，如下所示： webpack.config.js （您可以在下面找到我的webpack.config.js源代码） 那么，当我以npm脚本运行webpack（或者更确切地说，在本地运行webpack）时，为什么会这样呢 package.json 浏览器是否找到.mp4文件 index.html main.js 正如我前面提到的

我正在使用webpack合并不同的webpack.config文件。 我试图传递节点_env（或任何其他变量） 如何从webpack.common.js文件访问process env变量 这是webpack.prd.config.js文件： const merge = require("webpack-merge"); const common = require("./webpack.common.js"); const webpack = require("webpack"); modul

我在我的新项目中使用了webpack和Babel。在添加静态JS文件之前，一切都很好。通常捆绑操作需要5秒钟。但添加库绑定后大约需要420秒！！！OpenLayers JS文件大小约为490 KB，这是丑陋的。所以它不需要编译 我测试时没有使用巴贝尔，只使用了网页，耗时5秒。所以问题是关于巴别塔的编译。我如何防止Babel不编译OpenLayers，而只是将其添加到结果包文件中。我还可以使用其他外部JS文件以及OpenLayers。您可以排除它： { // ... loader: 'ba

我刚刚开始使用Webpack3和dllplugin。我设法找到了一些关于这个的博客文章。但是，它们中没有一个具有适当的代码示例/GitHub samplecode。有人知道这个/工作示例的示例代码引用吗？这是一个很好的简单示例： 我们在vendor.js中定义函数（这是我们将作为DLL引用的库） vendor.js function square(n) { return n*n; } module.exports = square; var webpack = require('webp

在开发Gatsby页面/视图时，有一个graphql模板文本可用。不知道它到底是从哪里来的 使用Gatsby节点api（Gatsby node.js）创建页面时，graphql解析器被注入到函数中，例如createPages 我想知道如何在页面和节点部分之间共享GraphQL片段。理想情况下，我希望两者都使用模板literalgraphql，这样我的IDE就可以理解它的graphql和wire语法高亮显示。目前，我的节点查询是传递给graphql函数的纯字符串，我没有自动完成功能。最后，我也遇到

在webpack 3中，我们曾经能够拥有一个依赖项，并且它的所有依赖项都可以通过以下方式组合在一个“公共块”中： new webpack.optimize.CommonsChunkPlugin({ name: 'common-init', minChunks: Infinity }) 在Webpack4中，您需要使用splitchunk。但是，现在的一切都基于minChunk和test，它不支持“无限”，如果您想得到与上面“类似”的东西，您现在需

我是Vue的新手。我只是通过vue创建我的项目名来创建vue项目 很好 但是如何更改文件夹结构呢？是否将src和public包装在client文件夹中 app folders: |-client |- src |- public |- package.json 并且仍然使用所有cli功能？在package.json中更改service和build脚本： vue cli服务服务至vue cli服务客户端/src vue cli服务生成到vue cli服务生成客户端/src 和vue.co

我无法通过github和google搜索CopyWebpackPlugin或ManifestPlugin问题的解决方案 当我使用webpack-p构建bundle时，可以完成以下工作 代码通过Transpiler、minify等运行（参见webpack.config.js） 导入的css资产将被释放（MiniCssExtractPlugin） 输出文件夹（public/build）已清空（CleanWebPackagePlugin） assets/img/static中的一些资源被复制到pub

我用@babel/core替换了babel-core，而babel-loader期望babel-core： { "name": "myproject-ui", "version": "1.0.0", "description": "User interface for myproject", "main": "index.js", "scripts": { "start": "npx webpack-dev-server", "build": "npx web

在使用“Babel loader”网页插件时，如何设置Babel环境变量（即Babel_ENV） 我希望在使用Webpack时能够使用不同的Babel配置。解决方案是在Webpack配置文件中的“Babel loader”规则中设置特定选项 在Babel Loader v8+中，该选项被称为envName，但我相信在以前的版本中它被称为forceEnv webpack.config.js rules: [ { loader: 'babel-loader', options:

devServer.contentBase的网页上显示 也可以从多个目录提供服务： webpack.config.js module.exports = { //... devServer: { contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')] } }; 通过CLI使用 webpack-dev-server --content-base /path/to/content

我有一个电子项目，它使用ceratin nodejs库（@grpc/proto-loader）。 生产构建无法工作，因为webpack使用自己的函数替换了require.resolve（），该函数返回模块ID而不是路径。如何防止webpack这样做 我试图将有问题的包添加到“externals”中，但这似乎不起作用 我希望应用程序使用node的require（）函数。 我知道可以使用非Web包，但我不能修改包的代码，它是第三方库。那么有更好的方法吗？我写了一篇文章来解决这个问题： 更新您的web

尝试以这样的方式运行： var path = './App'; module.hot.accept(path, () => { renderComonent(); }) 不行 仅： 在第一种情况下，它将刷新页面，而在第二种情况下，它不会刷新页面。 PS：我正在使用一个新的createreact应用程序sample 我认为这是HMR/webpack的一个bug 有什么想法吗？这是因为HotModuleReplacementPlugin插件的工作方式是在编译时解析提供给module.

因此，我在尝试编译网页包代码时，会在网页包代码中出现此错误，当我在生产模式下开始时会发生此错误，当我删除html加载程序时，错误消失，我还包括要使用的HtmlWebpackPlugin和文件加载程序： webpack.prod.js： const path = require("path"); const common = require('./webpack.common.js'); const { merge } = require('webpack-merge'); c

我正在尝试运行webpackserve 它给出的是SyntaxError:Invalid正则表达式：/（\p{Uppercase\u Letter}+\p{Lowercase\u Letter}}}\d）（\p{Uppercase\u Letter}+/：无效转义 在这一行 我遗漏了什么吗？我今天也遇到了同样的问题。我通过将我的节点版本更新到最新的稳定版本来解决这个问题 sudo npm cache clean -f sudo npm install -g n sudo n stable 在我