- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 webpack/npm 很陌生,我正试图弄清楚如何在其他项目依赖项中使用 css url。
文件夹结构
src
fonts/
scss/
app.scss
js/
app.js
img/
index.html
var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js'
},
devServer: {
stats: 'errors-only',
compress: true,
open: true,
port: 9000
},
module: {
rules: [
// ES6 -> ES5 transpiler
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// SCSS to CSS -> Autoprefix -> Load CSS
{
test: /\.(scss|css)$/,
use: extractPlugin.extract({
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [require('autoprefixer')()]
}
},
'sass-loader'
]
})
},
// HTML Loader
{
test: /\.html$/,
use: ['html-loader']
},
// Image Loader
{
test: /\.(jpg|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]'
}
}
]
},
// Font Loader
{
test: /\.(eot|ttf|woff)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new extractPlugin({filename: 'scss/app.css'}),
new cleanWebpackPlugin(['dist']),
new htmlWebpackPlugin({ template: 'src/index.html' }),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
]
};
import 'lightgallery';
@import '~lightgallery/dist/css/lightgallery.css';
fonts/
中的字体使用 webpack
file-loader
http://localhost:9000/scss/img/loading.gif
http://localhost:9000/img/loading.gif
/
?
最佳答案
file-loader
尊重 output.publicPath
,但是因为你没有设置它,所以生成的路径将是一个相对路径。您可以将公共(public)路径设置为/
.
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js',
publicPath: '/'
},
publicPath
file-loader
上的选项.
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]',
publicPath: '/'
}
}
关于Webpack 相对 css url() 与 file-loader/css-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44204353/
我正在使用 webpack 开始我的学习之路,但遇到了一个问题,我认为这是由 extract-loader 引起的。 .当webpack抓取我的HTML文件时,似乎无法正常编译,在使用import.m
我正在使用 tomcat 8,在 tomcat-home/config/catalina.properties ,有关于的部分 common.loader, server.loader and sha
在使用 import 语句时,我对区分 sass-loader 和 css-loader 有点困惑。据我所知,css loader resolve import statment(@import) 和
我的 webpack 加载器数组中有这个加载器: { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('sty
我对 url-loader 、 file-loader 和 image-loader 感到很困惑。谁能解释一下 url-loader 、 file-loader 和 image-loader 的区别是
我有 page.css @imports index.css。 page.css 和 index.css 都有 display: flex Webpack.config.js 包含: module:
我在 webpack 中使用生产模式构建的多入口点最终 bundle 中导出的多入口编译 js 文件始终包含加载器内容。如何消除它们以及为什么包含它们? 重现 git clone https://gi
模板加载器找到模板但未加载模板 TemplateDoesNotExist at /cardpayment/ cardpayment.html Request Method: GET Reque
当我尝试运行 gradle tR (tomcatRun) 时出现此错误 A child container failed during start java.util.concurrent.Execu
Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].StandardContext[/projectna
我计划将 Webpack 用于一个项目,并且我正在使用 Html-loader + file-loader 设置我的工作流程,以获取带有图像动态 src 的生产 html 文件,正如 Colt Ste
我有一个巨大的 csv 文件,其中包含数百万条记录,我想使用 python 脚本将它加载到 Netezza 数据库中。我尝试了简单的插入查询,但速度非常非常慢。可以指出一些示例 python 脚本或一
我想将 ts-loader 与 babel-polyfill 一起使用,但不使用 babel-loader。但是当我尝试构建该项目时,我收到了此错误。谁能告诉我我缺少什么。 ERROR in ./sr
下面是我的 webpack.config.js 和 package.json module.exports = { entry: "./entry.js", output: { fi
我在两台不同的 PC 上遇到了一个问题。对于我的项目,我为开发安装了以下依赖项:(webpack webpack-cli @babel/core @babel/preset-env @babel/pr
模板文件保存在app目录下,但渲染时引发TemplateDoesNotExist异常: 模板加载器事后分析如下: Django 尝试按以下顺序加载这些模板: Using loader django.t
PHPUnit 手册说: If you point the PHPUnit command-line test runner to a directory it will look for *Test
我正在开发一个需要 html 的角度应用程序要提取为纯 HTML 文件的文件,同时应检查任何 要求这些图像(作为 Assets )。另外,图片是基于根路径的(所以 /images/something.
我们在 sql 加载器中遇到了问题。我们正在尝试将一个大约 46 亿行(近 340 GB)的数据文件加载到 2 个 oracle 表中,基于一些使用 Sql Loader 的条件。但是在加载了 42
我将 CSS 模块与 webpack css-loader 一起使用,然后将它们与 mini-css-extract-plugin 捆绑在一起。 这是我的配置的样子: { test: /\.c
我是一名优秀的程序员,十分优秀!