Question

我有这个文件夹结构

这是我的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'])
    ]
};

资产/ style.less

@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;
}

然后是assets / 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（＆＃34; fonts / Linearicon- *），编译以错误结束。

错误 ./node_modules/css-loader!./node_modules/resolve-url-loader?root=./../!./node_modules/less-loader/dist/cjs.js!./assets/style.less 找不到模块：错误：无法解决＆＃39; ./ linearicons /字体/ Linearicons-Free.eot w118d＆＃39？;在＆＃39; /家/ wwwhome / webpackdemo /资产＆＃39; @ ./node_modules/css-loader!./node_modules/resolve-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

对于编译器，它相对于文件夹＆＃34; linearicons＆＃34;但我想总是在资产/字体中解决它。我可以更改网址中的所有网址（＆＃39; ../ fonts /Linearicons-Free.eot?w118d'）但这不方便，因为这是一个小部分一个更大的主题与数百个更少的文件。我已尝试将一个根参数添加到resolve-url-loader？root = assets / fonts但它没有工作。

有什么想法吗？

由于

Answer 1

您可以为此添加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/')
        }
    }
};

Webpack无法解析相对路径

1 个答案: