当我从node_modules中的包中捆绑CSS时,我遇到了路径相对性的麻烦。
在原始样式表中,从子文件夹中请求图像。通过Webpack文件夹绑定后,文件夹名称是正确的,但在映像路径之前没有../
。
附上我能提供的所有内容,包括项目文件夹结构和webpack配置。
vendor.scss
@import "~leaflet/dist/leaflet.css";
@import "~leaflet-draw/dist/leaflet.draw.css";
@import "~leaflet-easybutton/src/easy-button.css";
原始leaflet.draw中的图像导入(css和html在一个文件夹中)
url('images/[filename].[ext]')
捆绑后图像导入(css在子文件夹中)
url('img/[filename].[ext]')
文件夹结构
node_modules/
- leaflet-draw/
- - dist/
- - - leaflet-draw.css
- - - images/
- - - - [images]
src/
- scss/
- - vendor.scss
- index.html
dist/
- css/
- - vendor.css
- img/
- - [images from imported css]
- index.html
webpack.cofing.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
mode: 'development',
entry: {
'vendor': [
'./src/js/vendor.js',
'./src/scss/vendor.scss'
],
'fa': './src/js/fa.js',
'sanAndreas': [
'./src/js/sa.js',
'./src/scss/sa.scss'
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
sourceMapFilename: '[file].map'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, 'src/js'),
use: {
loader: 'babel-loader',
options: {
presets: 'env'
}
}
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {name: 'img/[name].[ext]'}
},
]
},
{
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, 'src/scss'),
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
options: {
sourceMap: true,
minimize: true
}
},
{
loader: 'resolve-url-loader'
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
},
]
})
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
]
},
devtool: "source-map",
plugins: [
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin({
filename: './css/[name].css',
allChunks: true
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
inject: false
}),
new HtmlWebPackPlugin({
template: "./src/sa.html",
filename: "./sa.html",
chunks: ['vendor', 'sanAndreas', 'fa']
}),
new HtmlWebPackPlugin({
template: "./src/five.html",
filename: "./five.html",
chunks: []
})
]
}