[英]Webpack cannot resolve relative path
我有這個文件夾結構
這是我的webpack.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
bundle: ['./src/index.js',
'./assets/style.less']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'web/dist'),
publicPath: path.resolve('/webpackdemo/web/dist/')
},
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "resolve-url-loader", "less-loader"]
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=/fonts/[name].[ext]'
}
]
},
plugins: [
new ExtractTextPlugin('style.css'),
new CleanWebpackPlugin(['web/dist'])
]
};
資產/樣式
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,500,600,700&subset=latin,latin-ext);
@import "linearicons/linearicons.less";
body{
font-family: "Open Sans", sans-serif;
font-size: 12px;
}
然后資產/linearicon/linearicon.less
@font-face {
font-family: 'linearicons';
src:url('fonts/Linearicons-Free.eot?w118d');
src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
url('fonts/Linearicons-Free.woff2?w118d') format('woff2'),
url('fonts/Linearicons-Free.woff?w118d') format('woff'),
url('fonts/Linearicons-Free.ttf?w118d') format('truetype'),
url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
font-weight: normal;
font-style: normal;
}
問題是由於url(“ fonts / Linearicon- *),編譯以錯誤結束。
./node_modules/css-loader!./node_modules/resolve-url-loader?root=./../!./node_modules/less-loader/dist/cjs.js!./assets/style.less模塊中的錯誤找不到:錯誤:無法解析'./home/wwwhome/webpackdemo/assets'@ ./node_modules/css-loader!.//node_modules/resolve-中的'./linearicons/fonts/Linearicons-Free.eot?w118d' url-loader?root =。/ .. /!./ node_modules / less-loader / dist / cjs.js!./ assets / style.less 6:173-230 @ ./assets/style.less @ multi ./ src / index.js ./assets/style.less
對於編譯器,它相對於文件夾“ linearicons”,但我想始終使用資產/字體來解決它。 我可以更改url( '../fonts /Linearicons-Free.eot?w118d')中的所有url,但這並不方便,因為這是一個較大主題的一部分,文件數量減少了數百個。 我試着也添加一個根參數到resolve-url-loader?root = assets / fonts,但是沒有用。
任何想法?
謝謝
您可以為此添加resolve.alias
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
bundle: ['./src/index.js',
'./assets/style.less']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'web/dist'),
publicPath: path.resolve('/webpackdemo/web/dist/')
},
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "resolve-url-loader", "less-loader"]
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=/fonts/[name].[ext]'
}
]
},
plugins: [
new ExtractTextPlugin('style.css'),
new CleanWebpackPlugin(['web/dist'])
],
resolve: {
alias: {
linearicons: path.resolve(__dirname, 'fonts/')
}
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.