标签: webpack-file-loader
使用带有.html条目的webpack
从传统输入开始,如何webpack将Web应用程序转换为输出.html文件.html？
这是一个简单的起点:
的index.html
<body>
<output></output>
<script src="./main.js"></script>
</body>
main.js
import React from "react";
document.querySelector("output").innerText = React.version;
webpack.config.js
module.exports = {
entry: "./index.html",
output: {
filename: "output.html"
},
module: {
rules: [
{test: /^index\.html$/, use: [
{loader: "extract-loader"},
{loader: "html-loader", options: {
attrs: ["script:src"]
}}
]}
]
}
}
然而,这导致SyntaxError: Unexpected token import处理main.js时.
推荐指数
解决办法
查看次数
使用相对路径从root用户加载图像 - > webpack - file-loader - Angularjs
我正在使用Webpack在我的HTML,CSS和JS上加载图像.
我的配置是:
{
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: [
'angular', './src/lib.js', './src/app.js',
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
},
module: {
rules: [{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: ['file-loader?name=[name].[ext]&outputhPath=images/&publicPath=images/'],
},{
test: /\.css|scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader']
})
},{
test: /\.html$/,
exclude: [
path.join(__dirname, '/src/index.html')
],
use: [
{ loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src'))},
{ loader: 'html-loader'},
]
}],
},
plugins: [
new …javascript angularjs webpack html-webpack-plugin webpack-file-loader
推荐指数
解决办法
查看次数
webpack 文件加载器复制文件
我正在使用 webpack，它是file-loader + html-loader将文件发送到我的输出目录中。它几乎按预期工作，因为它还复制了这些文件。
这是我的webpack.config.js文件的一部分：
module.exports = {
module: {
rules: [
{ test: /\.html$/, use: ["html-loader"] },
{
test: /\.(jpg|png)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img",
},
},
},
],
},
};
有一个小例子说明我的输出目录的样子：
dist/
- img/
- img1.png
- img2.png
- ab0d12.png
- c3d612.png
- index.html
- bundle.js
带有散列名称的两个图像是img/目录中不需要的重复项。正如您在上面的示例中看到的，我什至没有将名称设置为散列，而且我也无法以任何方式打开重复文件。
我正在使用一些插件，例如HtmlWebpackPlugin或CleanWebpackPlugin，但我相信它们不会导致问题。
版本：
- 网络包
5.28.0 - 文件加载器
6.2.0 - html加载器
2.1.2
推荐指数
解决办法
查看次数
Webpack文件加载器不会复制文件
在Angular2应用程序中,我在webpack配置中设置了文件加载器,如下所示:
{
test: /\.(eot|svg|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file?name=/assets/fonts/[name].[ext]'
}
我在配置中的其他地方也有这个:
modulesDirectories: ['node_modules']
据我所知,文件加载器在node_modules文件夹中搜索与给定表达式匹配的任何文件(在本例中为字体文件),并将它们复制到/assets/fonts构建输出中的文件夹.但是这确实有效,因为实际上没有文件被复制到目标文件夹.我错过了什么？
另外,我还想知道如何处理冲突,因为node_modules多个包中可能存在具有相同名称的文件.
更多信息:
vendor.scss文件包括以下内容:$ zmdi-font-path:"assets/fonts"; @import"~special-design-iconic-font/scss/material-design-iconic-font.scss";
sass-loader最终将其应用于以下css:
@font-face {
font-family: 'Material';
src:url('assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'),url('assets/fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'),url('assets/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0}') format('truetype');
font-weight: normal;
font-style: normal;
}
上面的两个步骤将导致从浏览器到字体文件的请求assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0.这显然不会发生在运行时.require文件在哪里,以便在构建时将其复制到资产/字体？
我也在sass-loader管道中使用:{test:/.scss$/,loaders:['raw-loader','sass-loader']}
并在我的组件中包含sass,如下所示:
styleUrls: [
'./../assets/scss/main.scss'
]
我可以看到,从浏览器中看到css包含在HTML中,但是对字体的调用返回404.
推荐指数
解决办法
查看次数
Webpack 不加载 png 图像
我在 src 文件夹中有几张图片：
src/img/favicon.png
src/img/profpic.png
在 index.html 文件中，我将指向
<link rel="shortcut icon" href="img/favicon.png" />
在一些 html 文件中，我会指出
<img src="img/profpic.png" />
我正在尝试通过 webpack 加载图像、字体。下面是我的 webpack.config
module.exports = {
context: path.resolve('src'),
entry: {
app: ["./index.ts"]
},
output: {
path: path.resolve('build'),
filename: "appBundle.js"
},
devServer: {
contentBase: 'src'
},
watch: true,
module: {
preLoaders: [
{
test: /\.ts$/,
loader: "tslint"
}
],
loaders: [
{test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}, {
test: /\.html$/, …推荐指数
解决办法
查看次数
如何使用 webpack 打包图片？
我正在使用 webpack 模块打包器制作一个 angular2 应用程序。现在我添加了文件加载器，用于加载 jpg、gif、png 等图像文件。但是当我运行构建命令时，图像文件没有被捆绑。这是我的配置：
webpack.config.js （仅限图像加载器配置）
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=.+)?$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
我在我的 html 模板中包含了一个文件夹中的图像，如下所示：
<img src="/asset/img/myImg.png"/>
在我的 css 中也是：
#myBackground {
background: background: #344556 url(/assets/img/background.jpg) center/cover;
}
但是当我构建整个应用程序时，图像没有像我在 webpack 配置中指定的那样放置在资产文件夹中。
现在最奇怪的是字体使用相同的配置，它们是在资产文件夹中创建的。这是我用于在 style.css 中包含字体的 css：
@font-face {
font-family: 'robotolight';
src: url("../fonts/roboto-light-webfont.eot");
src: url("../fonts/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto-light-webfont.woff") format("woff"), url("../fonts/roboto-light-webfont.ttf") format("truetype"), url("../fonts/roboto-light-webfont.svg#robotolight") format("svg");
font-weight: normal;
font-style: normal;
}
运行构建后，可以在assets文件夹中找到该字体的所有文件，如svgs、ttf、woff等。
谁能告诉我为什么没有在资产文件夹中创建图像，而在字体文件中创建了相同的配置/加载程序。
推荐指数
解决办法
查看次数
webpack 文件加载器相对路径
我有一个 webpack 配置文件和一个像这样的图像的示例测试：
module: {
rules : [
test : /\.(jp?g|png|gif)$/,
'file-loader?name=[name].[ext]&outputPath=images/'
]
}
我有一个像这样的简单文件结构：
/ src
/ img (1.jpg,2.jpg....)
/ css (a.css,b.css....)
a bunch of html files
现在，当我在 css 文件中引用图像时，我会写一些类似 url('../img/1.jpg) 的内容，因为我需要上一级并进入 img 文件夹，当我在 html 中包含图像时，我需要使用这样的东西： <img data-id="1" src="<%= require('./img/1.jpg') %>" />.
当我运行 webpack 时一切正常，但在最终的 css 文件中没有正确配置路径！我得到这样的东西：
background: url(src/img/5.jpg);
但应该是
background: url(../src/img/5.jpg);
因为生成的 css 文件将在一个 css 文件夹中
换句话说，最终的 css 文件进入一个子文件夹，所以里面的图像引用都应该得到一个 '../' 但他们没有
我希望我足够清楚
推荐指数
解决办法
查看次数
为什么导入默认值在TypeScript中返回"undefined"
我正在使用文件加载器来引用资产(例如图像),但它返回undefined:
项目文件
(dist/*文件由webpack生成)
dist/
f74c4286ea273ec33454127cc4d1dee7.png
main.js
img/
img.jpg
src/
index.ts
tsconf.json
webpack.config.js
webpack.config.ts
const path = import("path");
module.exports = {
mode: "development",
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.ts$/,
use: { loader: "ts-loader" }
},
{
test: /\.png$/,
use: { loader: "file-loader" }
}
]
}
};
tsconfig.json
{
"include": ["./src/*.ts"]
}
SRC/index.ts
import A from "../img/img.png";
import * as B from "../img/img.png";
console.log('A', A);
console.log('B', B);
结果 …
推荐指数
解决办法
查看次数
React + SSR + Webpack +节点，意外令牌？PNG
我让webapp与在节点服务器上运行的服务器端呈现功能发生反应。我正在使用资产目录中的本地图像（如下所示：
<img src={require('../../../assets/img/image.png')} width="400" />
在客户端运行良好，但在服务器端，节点尝试读取图像文件的内容并抛出以下提到的错误。
(function (exports, require, module, __filename, __dirname) { ?PNG
SyntaxError: Invalid or unexpected token
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:605:28)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
我试过使用文件加载器，URL加载器，但没有任何效果。用于文件加载器的webpack配置：
module: {
rules: [
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
},
谁能让我知道这里的问题。或者，除了之外，还有其他任何方法可以使用本地图像吗require()？任何帮助，将不胜感激。
谢谢〜Satish
推荐指数
解决办法
查看次数
Webpack - 如何通过 image-webpack-loader 将 jpg/png 转换为 webp
我想从 webpack 的 jpg/png 生成 webp 文件。为此，我使用 image-webpack-plugin ( https://github.com/tcoopman/image-webpack-loader )
在插件文档中写道，webp 附加优化器“将 JPG 和 PNG 图像压缩为 WEBP”（https://github.com/tcoopman/image-webpack-loader#usage），但在遵循文档步骤后，转换不起作用。
文件以 jpg 格式导出，但没有进行任何转换。
我已经关注了这些帖子，但我不明白如何在“非反应”环境中进行翻译：
webpack.config.js
{
test:/\.(gif|png|jpe?g|svg)$/i,
use:[
{
loader:'file-loader',
options:{
outputPath:'images',
name:'[name].[ext]'
}
},
{
loader:'image-webpack-loader',
options:{
mozjpeg:{
progressive:true,
quality:65
},
optipng:{ enabled: false },
pngquant:{ quality: [ 0.65, 0.90 ], speed:4 },
gifsicle:{ interlaced: false },
webp:{ quality: 75 }
}
}
] …推荐指数
解决办法
查看次数