草庐IT

image-webpack-loader

全部标签

javascript - Webpack - 样式表加载但没有字体

我可以毫无问题地在页面中查看我的样式表。但是我无法让我的网络字体工作。我试图保存我的css的输出,但没有发生。我相信这就是字体无法正常工作的原因。网页包varwebpack=require('webpack');varExtractTextPlugin=require('extract-text-webpack-plugin');module.exports={resolve:{extensions:['','.js']},entry:['webpack-hot-middleware/client','./src/client/js/Kindred.js'],output:{path:

javascript - webpack 从多个入口文件导出类

我正在使用webpack捆绑一个框架供第3方使用。这个框架应该公开多个ES6类。以模块化方式构建,我为每个文件编写了一个类。我想要做的是将所有这些文件构建在一起,并将它们捆绑在给定的“命名空间”下。示例:apples.jsexportclassApples{...}oranges.js导出类Oranges{...}webpack.config.js:module.exports={entry:['./src/apples.js','./src/oranges.js'],output:{path:'./dist',filename:'fruit.js',library:'Fruit',l

javascript - 使 webpack 库输出与 babel 6 兼容

Babel的第6版更改了exportdefault的功能,特别是它与commonjsrequire的关系。总而言之,在babel5之前,require('module')提供模块的默认导出,现在它总是返回包含模块所有导出的模块对象。如果只想要默认值,他/她必须使用require('module').default。Asexplainedhere,thereisverygoodreasonsbehindthis这个问题的目的不是破坏或破解这种行为。但是,如果一个人正在构建一个库,他/她通常不想分发一个模块,而是分发他的库的导出值(例如,一个函数,无论内部使用什么模块系统)。webpack

javascript - 在 Firefox 中检测到 "image corrupt or truncated"

(先发制人:如果您想将此标记为重复项,请注意其他问题似乎在问“为什么我会收到此错误?”我知道为什么会收到此错误;我想知道如何检测我的JavaScript代码中的错误。它只出现在Firebug控制台中,当然,在加载图像时对用户来说是显而易见的。)我正在使用picturefill对于响应图像。我有一个为图像上的加载事件触发的回调。因此,每当有人调整浏览器窗口大小时,回调就会运行,以便通过picturefill加载不同的图像。在回调中,我通过Canvas将图像数据转换为dataURL,这样我就可以将图像数据缓存在localStorage中,以便用户即使在离线时也可以使用。注意关于“离线”的部

javascript - 如何在 IE 11 的 Image.load 上获取 SVG 的宽度和高度

它在任何地方都可以正常工作,但在IE11中不行(我还没有测试过其他IE版本)。varimg=newImage();img.onload=function(){alert('img:'+img.width+'x'+img.height+'natural:'+img.naturalWidth+'x'+img.naturalHeight);};img.src='http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';JSFiddle:JSFiddle结果:img:121x30natural:121x30-真正的浏览器(Ch

javascript - 如何使用 webpack 从 node_modules 加载静态 CSS 文件的示例?

我不知道如何使用webpack从node_modules库加载任何CSS,例如,我已经安装了传单,但每次加载leaflet/dist/leaflet.css的尝试都失败了。您能否提供示例如何从node_modules加载静态样式?下面是我当前的webpack配置。此外,我正在使用extract-text-webpack-plugin和sass-loader我的元素scss文件运行良好,我也有css-loader,我是要解析静态css文件还是向stylePathResolves添加内容?//require('leaflet/dist/leaflet.css');varExtractTex

javascript - Angular http : how to call images with custom headers?

在htmlView中,图片是这样显示的:element.image.url指向一个url,如:/rest_api/img/12345678。这工作正常,显示图像。现在,我添加身份验证:在用户通过身份验证之前,每个资源都会响应HTTP错误401,图像也是如此。当身份验证成功时,token将放置在自定义header中并随每个$http请求一起发送,从而允许访问资源:$http.defaults.headers.common['Authorization']=token;这对于加载了$resource的Json文件工作正常。但图片的直接链接在认证后仍然是401。如何调用带有自定义标题的图片?

javascript - 在使用 Mocha 和 Babel 进行测试时处理 WebPack CSS 导入

当测试具有WebpackCSS导入的.js文件时,如import'./style.css',Mocha抛出一个语法错误(因为它试图导入和解析CSS文件作为JS)。有一个解决方案thathasalreadybeenpostedonStackOverflow,但它仅在您尚未将编译器与Mocha一起使用时解决。我正在使用Babel5。我尝试了以下方法,但似乎Mocha不支持传递多个编译器://npmtestscriptmocha./src/**/*Test.js--compilerscss:./scripts/mocha-webpack-compiler.jsjs:babel/registe

javascript - webpack --watch 时如何从构建目录中删除旧文件?

这个问题在这里已经有了答案:Deleteunusedwebpackchunkedfiles(11个答案)关闭5年前。当我的webpack.config.js被设置为监视我的源文件,并且输出文件包含一个哈希值时,那么每次构建成功完成时,都会存在一组全新的构建文件。这很快就会用cruft填满构建目录!如何让webpack删除每次构建时的旧文件?module.exports={...watch:true,output:{filename:'[name]-[hash:8].js'}...}我知道我可以使用webpack-dev-server在内存中构建,但这不适合我当前的构建过程。

javascript - Webpack:我们如何*有条件地*使用插件?

在Webpack中,我有以下插件:plugins:[newExtractTextPlugin('styles.css'),newwebpack.optimize.UglifyJsPlugin({compress:{warnings:false},drop_console:true,}),]我想应用UglifyJsPlugin仅针对特定目标,所以我尝试使用我预期的条件:plugins:[newExtractTextPlugin('styles.css'),(TARGET==='build')&&newwebpack.optimize.UglifyJsPlugin({compress:{w