webpack4压缩后，dist中没有图片

Question

最近使用webpack4+vue搭建脚手架，开发环境没有任何问题，但是运行build之后，图片就没有了，已经设置了图片打包出口和img标签src根级路径，但是图片没有被打包进去，脚手架结构如下

webpack.config.js如下：

const path = require('path');

// 引入 mini-css-extract-plugin 插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 清除dist目录下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入HappyPack插件
const HappyPack = require('happypack');

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

// 引入 webpack-deep-scope-plugin 优化
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    // 入口文件
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js',
        // 将输出的文件都放在dist目录下
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                // 使用正则去匹配
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {}
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('postcss-cssnext')(),
                                require('cssnano')(),
                                require('postcss-pxtorem')({
                                    rootValue: 16,
                                    unitPrecision: 5,
                                    propWhiteList: []
                                }),
                                require('postcss-sprites')()
                            ]
                        }
                    },
                    {
                        loader: 'stylus-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'happypack/loader?id=css-pack'
                ]
            },
            {

                test: /\.less$/,
                use: ['style-loader', 'css-loader','less-loader'],
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10000, 
                        name: "[name].[ext]",
                        outputPath:"images/",//图片打包的出口
                        publicPath:"images/"//打包后img标签src的根级路径
                    }
                }],

            },
            {
                test: /\.js$/,
                // 将对.js文件的处理转交给id为babel的HappyPack的实列
                use: ['happypack/loader?id=babel'],
                // loader: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules') // 排除文件
            },

            {
                test: /\.vue$/,
                use: ['vue-loader'],
                // use: ['happypack/loader?id=vue-loader'],
                exclude: path.resolve(__dirname, 'node_modules') // 排除文件
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.json', '.vue']
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        port: 8089,
        host: '0.0.0.0',
        headers: {
            'X-foo': '112233'
        },
        inline: true,
        overlay: true,
        stats: 'errors-only'
    },
    mode: 'development', // 开发环境下
    // mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new ClearWebpackPlugin(['dist']),

        new MiniCssExtractPlugin({
            filename: '[name].[contenthash:8].css'
        }),
        /****   使用HappyPack实例化    *****/
        new HappyPack({
            // 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
            id: 'babel',
            // 如何处理.js文件，用法和Loader配置是一样的
            loaders: ['babel-loader']
        }),
        new HappyPack({
            // 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
            id: 'vue-loader',
            // 如何处理.js文件，用法和Loader配置是一样的
            loaders: ['vue-loader']
        }),
        new HappyPack({
            id: 'image',
            loaders: [
                {loader: require.resolve('url-loader')},
            ]
        }),
        // 处理styl文件
        new HappyPack({
            id: 'css-pack',
            loaders: ['css-loader']
        }),
        // 使用 ParallelUglifyPlugin 并行压缩输出JS代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS的参数如下：
            uglifyJS: {
                output: {
                    /*
                     是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
                     可以设置为false
                     */
                    beautify: false,
                    /*
                     是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
                     */
                    comments: false
                },
                compress: {
                    /*
                     是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
                     不大的警告
                     */
                    warnings: false,

                    /*
                     是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
                     */
                    drop_console: true,

                    /*
                     是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
                     转换，为了达到更好的压缩效果，可以设置为false
                     */
                    collapse_vars: true,

                    /*
                     是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
                     var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
                     */
                    reduce_vars: true
                }
            }
        }),
        new WebpackDeepScopeAnalysisPlugin(),
        new VueLoaderPlugin()
    ]
};

其中关于图片的打包

项目中的引用

打包出来的dist

图片没有被打包进去
请问哪里有问题吗

Answer 1

你用的url-loader，设置的图片大小限制为10000字节，如果你的图片小于10000字节会被转成data url，就没有独立的图片文件。

Answer 2

var CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([{ from: './images', to: 'images' }]);

试一下这个呀，然后就是在使用路径的时候最好不要带src。

另外一个可能就是：能够正常访问，那图片可能换成了base64放到js上了