Webpack5实战笔记----11.设置图片名称与设置输出图片目录

修改webpack.config.js的内容：

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/"
    },
    module: {
        rules: [{
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1,
                        esModule: false
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                //修改file-loader配置的写法
                use: [{
                    loader: 'file-loader',
                    options: {
                        //哈希截取，让图片的名字变短
                        // name: '[name].[hash:6].[ext]',
                        // //在dist下面创建img目录
                        // outputPath: 'img'
                        //一般不用outputPath而是直接在name里面加img/
                        name: 'img/[name].[hash:6].[ext]'
                    }
                }]
            }
        ]
    }
}

/**options的参数
 * [ext]:扩展名
 * [name]:文件名
 * [hash]:文件名
 * [contentHash]:哈希名
 * [hash:<length>]
 * [path]:路径 
 */

运行结果：

源代码：webpack5的案例演示