修改输出文件路径

1. 修改 js 的文件位置

• 配置

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        /** 入口文件打包输出之后的文件名及文件位置 */
        filename: "static/js/main.js"
    },
    module: {
        rules: [
            {  
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {  
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {  
                test: /\.s[ac]ss$/i, 
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {  
                test: /\.styl$/i,
                use: ["style-loader", "css-loader", "stylus-loader"]
            },
            {  
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 600*1024, // 600kb
                    }
                },
            }
        ]
    },
    mode: "development",
}

2. 修改 js 的文件位置

• 配置

const path = require("path")
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        /** 入口文件打包输出之后的文件名及文件位置 */
        filename: "static/js/main.js"
    },
    module: {
        rules: [
            {  
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {  
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {  
                test: /\.s[ac]ss$/i, 
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {  
                test: /\.styl$/i,
                use: ["style-loader", "css-loader", "stylus-loader"]
            },
            {  
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 600*1024, // 600kb
                    }
                },
                generator: {
                    // 输出图片的名称
                    // [hash:10]：表示 hash 值取前 10 位，不写
                    // [hash]：表示全部 hash 值
                    filename: "static/images/[hash:10][ext][query]",
                }
            }
        ]
    },
    mode: "development",
}

3. 打包观察 dist 目录

dist目录