Question

我是webpack的新手。我想问一下如何在webpack中自定义文件路径。

以下是我测试的代码：

<?php /* @var $this Controller */ ?>
<?php $this->beginContent('//layouts/main'); ?>
<div class="span-19">
    <div id="content">
        <?php echo $content; ?>
    </div><!-- content -->
</div>
<div class="span-5 last">
    <div id="sidebar">
    <?php
        $this->beginWidget('zii.widgets.CPortlet', array(
            'title'=>'Operations',
        ));
        $this->widget('zii.widgets.CMenu', array(
            'items'=>$this->menu,
            'htmlOptions'=>array('class'=>'operations'),
        ));
        $this->endWidget();
    ?>
    </div><!-- sidebar -->
</div>
<?php $this->endContent(); ?>

我想问一下这些问题：

(function () {
    var webpack = require('webpack'),
        path = require('path'),
        BabiliPlugin = require('babili-webpack-plugin'),
        ExtractTextPlugin = require('extract-text-webpack-plugin');

    module.exports = {
        entry: {
            'site': ['./assets/js/site']
        },
        output: {
            publicPath: '/assets/',
            path: path.join(__dirname, 'wwwroot/assets/js'),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/i,
                    use: [{
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015', 'stage-1'],
                            compact: false
                        }
                    }]
                },
                {
                    test: /(\.(ttf|eot|svg)(\?[\s\S]+)?$)|(\.woff2?(\?v=\d+\.\d+\.\d+)?$)/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '../fonts/[name].[ext]'
                        }
                    }]
                },
                {
                    test: /\.(png|jpe?g|bmp|gif|ico)/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '../images/[name].[ext]'
                        }
                    }]
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract(['css-loader'])
                }
            ]
        },
        plugins: [
            new BabiliPlugin({}, { test: /\.min\.js$/ }),
            new webpack.ProvidePlugin({
                $: 'jquery'
            }),
            new ExtractTextPlugin('../css/bundle.css')
        ]
    };
}());

当我使用use: [{ loader: 'file-loader', options: { name: '../fonts/[name].[ext]' } }]设置name时，它会完全正确地编译，除了文件../内的url，就像这个快照一样：

然后，我尝试从名称中删除字符bundle.css，../文件夹是在fonts文件夹中创建的（这不是我的目标）。但是文件js文件夹中的url是正确的（我想要这条路径 - bundle.css）。

如何编辑？

p / s：你可以将这两张图片嵌入到我的问题中吗？它现在没有出现。谢谢！

Answer 1

您可能需要在加载程序的选项中设置上下文。默认情况下，使用当前工作目录。

我不确定你的src目录结构是什么，所以我猜不到。

use: [{
    loader: 'file-loader',
    options: {
        name: 'assets/fonts/[name].[ext]',
        context: './src/assets/fonts/'
    }
}]

如何在webpack中配置文件路径？

1 个答案: