Question

我需要从我的main.js文件中的npm模块中获得一堆.css文件，这是我的webpack配置的入口点，如下所示：

"use strict";
const ExtractTextPlugin = require("extract-text-webpack-plugin");

var webpack = require("webpack");

module.exports = {
    entry: {
        dashboard: './js/main.js',
        vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"],
    },
    output: { path: "../resources/public", filename: 'bundle.js' },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}),
        new ExtractTextPlugin("[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ],

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}),
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader',
                ],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
            }
        ]
    },
};

如果我不测试字体和图像，我会收到错误，因为某些模块，例如bootstrap.css，会查找.png和各种字体。

所以我添加了用于测试图像和字体的加载器，现在可以工作：它将构建！

但是，它还处理并输出一堆.png，.woff2，.eot，.tff文件到我不想要的同一输出文件夹。

“脏修复”是制作一个.sh脚本，我只是在终端中运行webpack后删除这些特定文件。但我宁愿不这样做。

如何更改我的webpack配置以测试图像和字体，但不处理并将它们输出到输出文件夹？

Answer 1

“脏”解决方案只是将这些文件输出到垃圾箱：

    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file-loader?hash=sha512&digest=hex&name=~/.local/share/Trash/[hash].[ext]',
            'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ],
    },
    {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=~/.local/share/Trash/[name].[ext]'
    }

它有效，但肯定不应该这样做：）

Answer 2

    { test: /\.jpg$/, loader: "file-loader?name=assets/images/[hash].[name].[ext]"},
    { test: /\.png$/, loader: "file-loader?name=assets/images/[hash].[name].[ext]&mimetype=image/png"},
    {
        test: /\.(html|hbs)$/,
        loaders: ['handlebars-template-loader']
    },
    // Bootstrap 4
    // { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' },
    // Bootstrap 3
    // { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
    {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?name=assets/fonts/[hash].[name].[ext]&limit=10000',
    },
    { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]' },
    {
        test: /\.(eot|svg)(\?[\s\S]+)?$/,
        loader: 'file?name=assets/fonts/[hash].[name].[ext]',
    }

Webpack 2：如何测试文件但不编译它？

2 个答案: