Webpack将图像转换为.ttg .svg .eot文件,并将png转换为国家'旗

时间:2018-01-21 11:14:47

标签: webpack

我的webpack将图像转换为一组带有.eot,.ttf和.svg扩展名的奇怪文件。它还会创建一个包含一组不同国家/地区的png文件。标志,没有包含我的初始图像的png文件。我使用image-webpack-loader,url-loader和file-loader,并且已经尝试重新安装它们。这是我的webpack.config.js

module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');

return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, './public/scripts'),
        filename: 'bundle.js'
    },
    module: {
            rules: [{
                 loader: 'babel-loader',
                 test: /\.js$/,
                 exclude: /node_modules/
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/',
                        publicPath: '/'
                    }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            optipng: {
                                optimizationLevel: 7
                            },
                            pngquant: {
                                quality: '65-90'
                            },
                            mozjpeg: {
                                quality: 65
                            }
                        }
                    }
                ]
            },
            {
            test: /\.s?css$/,
            use: CSSExtract.extract({
                use : [
                    {
                        loader : 'css-loader',
                        options : {
                            sourceMap : true // source map for css in development
                        }
                    },
                    {
                        loader : 'sass-loader',
                        options : {
                            sourceMap : true
                        }
                    },
                    {
                        loader: "jshint-loader"
                    }
                ]
            })
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins : [
        CSSExtract,
    ],
    devtool: isProduction ? 'source-map' : 'cheap-eval-source-map', // source map for locating a bug in source files, not in the bundle
    devServer: {
        contentBase: path.join(__dirname, "public"),
        publicPath: "/scripts/",
        historyApiFallback: true // this line is for client-side routing
    },
}

}

如何让webpack正确处理所有图像?

0 个答案:

没有答案