Question

我正在使用带有babel-loader的webpack来转换.jsx反应文件。但是，添加文件加载器或样式和css-loader不能正确处理反应组件或样式表中的required（）图像。

它们被webpack识别并复制到dist文件夹。图像文件的路径是正确的，我在css和js输出中验证了这一点。服务器也可以显示文件，我已经检查了一些手动复制的文件。

发生的事情是图像本身已损坏。没有图像查看器和浏览器可以显示导致浏览器中不可见图像的图像。

到目前为止我尝试过：

仅按照https://github.com/webpack/file-loader/issues/35中的建议使用babel-loader，导致错误：文件类型没有处理程序。
直接使用文件加载器
使用image-webpack-loader（似乎是在引擎盖下使用文件加载器）
使用IsomorphicLoaderPlugin（https://github.com/jchip/isomorphic-loader），这似乎是webpack-isomorphic-tools的一个更简单的替代方案
使用带有url（）和ExtractTextPlugin（'style-loader'，'css-loader'）的css background-images

上述所有步骤都导致webpack无法找到合适的处理程序或损坏的图像文件。

这是我当前的webpack配置供参考（我已经包含了所有这些，以防我遇到任何问题/冲突）：

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
        webpack = require('webpack');
        IsomorphicLoaderPlugin = require("isomorphic-loader/lib/webpack-plugin");



module.exports = {

    context: __dirname + '/client',

    entry: ['babel-polyfill', './index.jsx'],

    output: {
        filename: 'app.js',
        path: __dirname + '/dist',
        publicPath: '/'
    },

    resolve: {
        ignore: /node_modules/,
        extensions: ['', '.js', '.jsx']
    },

    devtool: 'source-map',

    plugins: [
        new ExtractTextPlugin('styles.css'),

        new IsomorphicLoaderPlugin({ keepExistingConfig: false }),

        new webpack.DefinePlugin({
            "process.env": {
                BROWSER: JSON.stringify(true)
            }
        })
    ],

    module: {

        preLoaders: [
            {
                loaders: ['isomorphine']
            }
        ],

        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread'],
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file!isomorphic"
            }
        ]
    }
};

带有babel-loader的Webpack反应腐败图像文件

0 个答案: