我正在使用webpack和一些插件和加载器来处理我的src/文件夹并构建一个dist/文件夹。url-loader(当图像大于特定限制时退回到file-loader),会将在html和scss文件中找到的图像输出到正确目录下。然而,它会更改这些文件中的相对路径,并以此生成一个具有错误路径的CSS文件。
文件结构:
我使用HtmlWebpackPlugin来复制我的HTML文件,因为它允许我指定要自动包含的脚本标签的块。对于CSS,在开发中,我使用style-loader将其注入到HTML文件中,在生产中,我使用MiniCssExtractPlugin将其提取到自己的文件中。
然而,当Webpack解析index.html和style.scss时,相对路径被替换为'assets/img/pic.jpg'和'assets/img/backgorund.jpg'。这不会破坏index.html中的路径,因为它实际上是相同的相对路径,但对于style.css来说显然是一个问题。我该如何停止url-loader更改相对路径,或者生成正确的相对路径?还请注意,在开发中使用style-loader将CSS注入到HTML中时,路径可以正常工作,因为它是相对于HTML文件的。理想情况下,Webpack应该能够根据我在生产中提取CSS或在开发中注入CSS来生成正确的相对路径。
我尝试过使用resolve-url-loader、指定publicPath和outputPath,当然也在网上寻找答案,但都没有成功。 webpack.config.js
文件结构:
src/
index.html
assets/
js/
index.js
scss/
style.scss
img/
pic.jpg
background.jpg
dist/
index.html
assets/
js/
index.js
css/
style.css
img/
pic.jpg
background.jpg
正如你所看到的,我的dist/文件夹与src/文件夹镜像对应,只是把scss编译成了css。
src/index.js导入了index.html和style.scss,以便webpack解析这些文件,并且其中的任何图像都可以由url-loader处理:
index.js
import '../../index.html';
import '../scss/style.scss';
使用相对路径在body上设置背景图片:
style.scss
body {
background: url('../img/background.jpg');
}
index.html只显示一张图片,同时使用相对路径:
index.html
<img src="./assets/img/pic.jpg" alt="pic">
我使用HtmlWebpackPlugin来复制我的HTML文件,因为它允许我指定要自动包含的脚本标签的块。对于CSS,在开发中,我使用style-loader将其注入到HTML文件中,在生产中,我使用MiniCssExtractPlugin将其提取到自己的文件中。
然而,当Webpack解析index.html和style.scss时,相对路径被替换为'assets/img/pic.jpg'和'assets/img/backgorund.jpg'。这不会破坏index.html中的路径,因为它实际上是相同的相对路径,但对于style.css来说显然是一个问题。我该如何停止url-loader更改相对路径,或者生成正确的相对路径?还请注意,在开发中使用style-loader将CSS注入到HTML中时,路径可以正常工作,因为它是相对于HTML文件的。理想情况下,Webpack应该能够根据我在生产中提取CSS或在开发中注入CSS来生成正确的相对路径。
我尝试过使用resolve-url-loader、指定publicPath和outputPath,当然也在网上寻找答案,但都没有成功。 webpack.config.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
mode: devMode ? 'development' : 'production',
entry: {
index: './src/assets/js/index.js',
},
output: {
filename: 'assets/js/[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, 'src'),
watchContentBase: true,
hot: devMode,
},
devtool: devMode ? 'source-map' : '(none)',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'assets/css/style.css',
})
],
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.(jp(e?)g|png|svg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'assets/img/[name].[ext]'
}
}
]
},
{
test: /\.scss$/,
use: [
{
loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: devMode,
importLoaders: 2
}
},
{
loader: 'sass-loader',
options: {
sourceMap: devMode
}
}
]
}
]
}
};
if (devMode) {
module.exports.plugins.push(new webpack.HotModuleReplacementPlugin());
}