捆绑html,js和css成一个index.html文件
好的,如此快速概述,我使用C#控制台应用程序将四个XML文件转换为HTML文档.该文档将需要与少数人共享(它不是托管/不是Web应用程序,而只是生成的HTML文件).有没有办法将此文件与其JavaScript文件和CSS文件捆绑在一起?目前,我只是将它们存储在工作文件系统上,并直接将其引用在HTML中,这暂时还可以,但是理想情况下它们将以某种身份包装. 环顾四周,看来Webpack可能是我所追求的,但是这似乎是一个简单的问题,感觉就像我在忽略了某些东西,而我搜索的任何东西似乎都带有带有流行语单词的算法要blo的搜索. tldr:我有一个html文档,我想分享该文档,而无需实际通过该人CSS和JS文件,也不想在Web应用程序上托管它.我如何以这样的方式打包该文件,当别人打开它时,他们将看到并能够按照CSS和JS的意图与文件进行交互. 解决方案 而不是引用CSS和JS文件,请执行以下操作:
30 2024-04-25
编程技术问答社区
使用.Net Core React/Redux模板,禁用webpack HMR会导致"__webpack_hmr "资源不断被请求。
我正在.NET Core 2.0上构建React/Redux应用程序的过程,因此我使用了提供的模板.当我通过启动启动禁用WebPack HMR时,我一直在遇到这个问题,基本上只是评论以下几行: app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, ReactHotModuleReplacement = true, HotModuleReplacementClientOptions = new Dictionary { { "quiet", "true" } }
10 2024-04-24
编程技术问答社区
调试 angular 2 typescript 源代码
我有一个由角-CLI产生的Angular2项目.我希望能够在Chrome Dev工具中调试Angular2打字源代码(不是我自己的打字稿代码,而是实际的Angular2代码). node_modules下的angular2 npm软件包仅包含转移的javascript文件,但它们包含源映射.我该如何完成这项工作? thx. 解决方案 显然,在Angular-Cli中尚不可能忽略Node_modules中的源地图( https://github.com/angular/angular-cli/issues/1838 ). 其他解决方案 如何将debugger;放在要调试的位置,这将触发Chrome Dev工具中的断点,您可以从那里开始工作. 其他解决方案 打开Chrome Developer工具(F12). 转到源标签.输入ctrl+p. 在下拉下搜索文件名. 选择文件并在要调试的行中添加断点. 并继续采取行动,以调用您要调试的行.
26 2024-04-23
编程技术问答社区
调试器断点错误行。Webpack 配置类型脚本
我终于在项目中可以使用TypeScript,但是断点不会在正确的行中停止,并且在您逐步执行中逐步逐步逐步逐步逐步介入一些代码行之前,变量值才可用.如果源地图中的不匹配似乎不匹配,则似乎有一些TTYPE. 我试图将添加tje sourcemapdevtoolplugin求解到webpack配置文件中,作为结构 下面的屏幕截图: mystring不确定,尽管该行据说已执行. 直接跳到函数后(不是const myNumber = myFunc(5); const myNumber = myFunc(5);),并且字符串的值可用,所以这很奇怪. 在我的webpack配置下方,启动. webpack配置: const webpack = require('webpack'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); con
12 2024-04-23
编程技术问答社区
我可以将 webpack 源映射和源代码文件放在不同的文件夹中吗?
我阅读了这个问题生产中的源地图文件 - 是否安全. ?.我想在带有源代码的不同文件夹中生成源地图文件.有什么方法可以使用WebPack做到这一点?我还阅读了此线程相对sourcemap路径,用于调试Webstorm中的deckStorm 和测试和测试和测试.再次失败. 解决方案 您可以使用 output.sourceMapFilename output.sourceMapFilename output.sourceMapFilename P> output: { filename: "bundles/[name].[chunkhash].min.js", sourceMapFilename: 'maps/[name].[chunkhash].map.js' }, ,然后仅从bundles文件夹中使用. 其他解决方案 正如Ivan所写,解决方案是使用output.sourceMapFilename 然而,推荐的解决方案来自 webpack doc
14 2024-04-23
编程技术问答社区
WebPack 源映射混乱(文件重复)
我决定在我今天旋转的一个新项目中尝试WebPack,并且从Sourcemaps中获得了非常奇怪的行为.我在文档中找不到任何有关它的信息,在浏览StackoverFlow时也找不到其他任何问题. 我目前正在查看 vue-cli的webpack template - 没有对代码,构建环境或其他任何更改进行更改. 我安装了所有内容,然后像这样运行: vue init webpack test && cd test && npm install && npm run dev 看我的sourcemaps,我看到以下内容: 这是一团糟.为什么有 HelloWorld.vue和App.vue的三个 ?更糟糕的是,每个版本的代码版本都略有不同,并且它们都不匹配原始源. HellowWorld.vue坐在根目录中 与原始源匹配,但是在那里做什么而不是在./src/components文件夹中做什么?最后,为什么没有第四个App.vue具有原始来源? 据我所知,这可能与We
12 2024-04-23
编程技术问答社区
如何在 VS Code 和 Chrome 浏览器中使用 SourceMaps 调试 VueJS 3 Typescript 项目(使用 Vue CLI 和 Webpack)?
tl; dr VS代码调试器始终说Unbound breakpoint,但是在Chrome Dev工具中设置了断点,并自动在VS代码中打开尊敬的文件(此后,该文件可行的VS代码调试器). chrome中的源(MAP)文件也有奇怪的名称,例如HelloWorld.vue?4a7c. 我使用vue create my_project设置了一个新的Vuejs 3项目.我选择了打字稿,babel和Vue版本3. 我正在尝试将VS代码调试器启动并运行,以与Java这样的其他项目的方式调试我的项目.因此,我复制了VS代码食谱侧面的最佳实践. (由于没有vuejs打字稿调试食谱,所以我将其用于vuejs和tyspript并尝试混合) 实际问题是,当我在说Unbound breakpoint的VS代码中设置一个断点时.我的假设是,VS代码无法将任何源地图文件映射到我的源文件,这表明WebPack以某种方式弄乱了文件命名或文件映射的配置是错误的. 到目前为止,我已经开始工作的是,
18 2024-04-23
编程技术问答社区
Webpack 使用上一个构建步骤中的现有源映射
我的编辑器将.ts文件编译到.js和.js.map文件,并使用webpack捆绑了.js文件. (我不希望WebPack负责编译.ts,因为那时错误将不会正确出现在编辑器中.) 如果我将编译的.js文件馈送到webpack,它不会拾取现有.js.map文件(通过每个文件中的//# sourceMappingURL=...),因此结果bundle.js.map指向.js文件,但不是原始.ts文件. 如何让WebPack保留在现有.js.map文件上,因此结果bundle.js.map点可以直接回到原始.ts文件? 解决方案 它发现了一个额外的webpack" preloader",称为 source-map-- source-map--装载机做技巧: $ npm install source-map-loader --save 然后在webpack.config.js中: module.exports = { devtool: 'source-map
12 2024-04-23
编程技术问答社区
与 webpack-dev-server 一起使用 socket.io 时出错
快速问题,我试图将webpack-dev-server与socketio一起使用,但是在尝试了不同的事情之后,我认为两个客户都在听同一端口的" 3000",我最终得到了某种握手如果我不使用同一端口上的webpack-dev-server,则会出现错误.这是我的服务器配置 const PORT = process.env.PORT || 3000; new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot: true, historyApiFallback: true, setup(app) { const server = require('http').Server(app); let onlineUsers = 0; const io = require('socket.io')(server); io.on('conn
12 2024-04-23
编程技术问答社区
导入 slick carousel 主题的 css 会在 webpack 构建时出错
我试图在我的父scss中导入slick-theme.scss @import "../node_modules/slick-carousel/slick/slick-theme.css"; 但是,在捆绑中,我会在slick-theme.scss中导入的文件上遇到错误.这是错误日志 ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss Module not found: Error: Can't resolve './ajax-loader.gif' in '/Users/Vishal/Documents/Work/nf-core/sass' @ ./node_modules/css-loader!./node_modules/postcss-loader/l
12 2024-04-22
编程技术问答社区
System.IO.FileNotFoundException。无法加载指定的文件。文件名:'System.Net.Sockets.resources'。
我正在开发带有角的dotnet核心应用程序. 我试图迁移到Dotnet Core 2.1和Angular 6. 我能够首先迁移到dotnet core 2.1,没有任何问题,但是当我尝试迁移到最新的Angular构建时,我遇到了问题. 这不是Angular本身的问题,而是WebPack的问题.我将package.json(除WebPack除外)中的所有软件包升级到了最新版本,但没有问题,但是HMR无法正常工作,我无法运行 webpack --config webpack.config.vendor.js . 所以,我使用了 npm install npm-check-updates -g ncu -u npm install 也升级WebPack. 我现在有这个软件包.JSON: { "name": "SIGAD", "private": true, "version": "0.0.0", "scripts": {
14 2024-04-17
编程技术问答社区
用webpack对多个javascript文件进行最小化处理
我是WebPack的新手.我希望使用WebPack将文件夹中的所有文件缩小到单个JS.我不希望在输入部分中手动添加所有文件名. 我很确定必须有一种干净的方法,但是我无法在Google或WebPack官方文档上找到它. 请帮助. 解决方案 这可能有效: const glob = require("glob"); module.exports = { entry: glob.sync("./src/*.js") };
14 2024-04-05
编程技术问答社区
如何用Webpack同时创建'web'和'node'版本的包?
是否有一种方法可以通过使用WebPack或浏览来创建一个捆绑包的" Web"和"节点"版本?捆绑包的" Web"版本将在客户端上使用,并且将在服务器上使用同一捆绑包的"节点"版本进行预渲染(" 等法" Web应用程序). 解决方案 我认为最简单的方法可能只是创建两个配置,一种配置中的一个target: "node">> target: "web",然后像$ webpack && webpack --config webpack.config.web.js 一样运行它们 其他解决方案 您可以在webpack.config.js文件中创建多个配置对象: const config1 = { target: 'web', ... } const config2 = { target: 'node', ... } export default [config1, config2]
10 2024-04-05
编程技术问答社区
自然地从npm导入ES模块的依赖关系,而不需要捆绑/转译第一方源代码
背景 我正在尝试创建一个" >" JavaScript应用程序,一个我不需要watch任务运行的任务每次保存任何源文件时都会运行watch watch. 它仅适用于第一方代码,但是当我尝试从NPM import依赖项时,我就卡住了. 目标 我想实现这种工作流程: npm install foo(假设它是ES模块,而不是CONCORJS) 编辑source/index.js并添加import { bar } from 'foo' npm run build.某物(webpack,lollup,a自定义脚本等)运行,捆绑foo及其依赖项./build/vendor.js(没有source/的任何内容). 编辑index.html添加
12 2024-04-05
编程技术问答社区
使用babel对webpack中的ES6代码进行最小化处理
我尝试了诸如uglifyjs,babelli(babel-minify)之类的选项.似乎无法正常工作. 姓名预期[au680.bundle.js:147541,22] babelli也不会减小代码. 可能是干净完成工作的插件. 在 var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var AppCachePlugin = require('appcache-webpack-plugin'); var appConfig= require('./config.js'); console.log("appConfig is ->>>",appConfig); var appPort = appConfig.APP_PORT;//Port on which the applica
12 2024-04-05
编程技术问答社区
使用Webpack,是否可以只生成CSS,不包括output.js?
我正在使用 webpack 与在我的项目中,我有一些构建脚本.其中一个构建脚本应该仅捆绑并缩小CSS.当我将WebPack用于其他脚本时,我发现即使我只想捆绑并缩小CSS . 它工作正常,除了我无法摆脱output.js文件.我不希望由此产生的WebPack输出文件.我只想要这个特定脚本的CSS. 有没有办法摆脱所产生的JS?如果不是,您是否建议其他用于处理CSS的工具?谢谢. 解决方案 有一种简单的方法,不需要额外的工具. 有一种简单的方法,您不需要额外的库,除了您已经在使用: webpack 使用 extfract-text-text-text-webpack-plugin . 简而言之: 使输出JS和CSS文件具有相同的名称,然后CSS文件将覆盖JS文件. 真实示例(webpack 2.x): import path from 'path' import ExtractTextPlugin from 'extract-text-webp
16 2024-04-05
编程技术问答社区
Webpack Uglify导致路由停止工作
当我uglify webpack捆绑包时,路由停止工作,而没有任何错误消息或日志消息.我正在使用oclazyload到懒惰的负载. rout.js module.exports = function(app) { var routeConfig = function($stateProvider) { $stateProvider .state('home', { url: '/', templateUrl: 'app/dashboard/dashboard.min.html', title: 'Home', ncyBreadcrumb: { label: 'Home' } }) .s
如何在Webpack中禁用捆绑式开发?
在我的Web应用程序中,我使用requirejs按需不同步加载JavaScript文件.这对开发人员来说效果很好 - 在调试我的应用程序时,我可以看到哪个脚本取决于加载它们的哪个和顺序.这个简化的调试. 后来,我切换到WebPack,因为配置更容易并且更容易维护.因此,WebPack现在为我生成了包含我的JavaScript代码的漂亮捆绑包.这效果很好,但是我想拥有的是模仿我以前的requirejs配置. 当我开发我的应用程序时,我希望WebPack生成一些简单的输入点(就像在requirej中一样),这些输入点会通过其" requient"参考来一个一个一个一个一个一个一个一个加载我的JavaScript文件. 同时,我仍然希望将WebPack部署到服务器时执行正常捆绑. 这可以实现吗? 解决方案 启用 devtools in webpack.config.js in webpack.config.js以控制和生成源地图(源地图(源地图)地图增强了调试过程).
28 2024-04-05
编程技术问答社区
Webpack:如何将多个javascript文件捆绑到一个输出文件中?
假设我有两个文件, main.js 和 app.js ;如何使用WebPack将它们都捆绑到一个文件中: bundle.js ? 解决方案 创建一个entry.js是您的WebPack条目文件,在此中,您的require您的附加文件 webpack.config.js module.exports = { entry: './src/entry.js' ... }; /src/entry.js // new syntax import './main.js'; import './app.js'; // or old syntax require('./main.js'); require('./app.js'); 如果这两个文件彼此取决于彼此,则在您的依赖树中反映这是有益的,并且在app.js中需要main.js,而不是在entry.js中进行app.js> 其他解决方案 您可以传递一系列条目: module.exports
8 2024-04-05
编程技术问答社区
将模块排除在webpack最小化之外
我们在单个页面应用程序中使用了WebPack.该应用程序已部署到许多环境中.我们需要在给定环境中调用特定端点的申请. 为了提供给定环境的端点地址是具有环境模块.这是当前的解决方案(有很多解决方案,这不是问题的重点).但是,我们需要将config.js排除在kinification中,以便可以作为部署过程的一部分覆盖它. config.js看起来如下: module.exports = { env: { endpointUrl: 'http://1.2.3.4', authUrl: 'http://5.6.7.8' } }; 并使用以下内容引用: const endpointUrl = config.env.endpointUrl; const authUrl = config.env.authUrl; WebPack配置看起来如下: var webpack = require('webpack'); ​
26 2024-04-05
编程技术问答社区