webpack学习笔记(4)-修改输出资源的名称和路径

1.修改资源的输出路径和名称

    1. 配置
// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "dist"),//绝对路径

    /*修改js文件输出位置--------------------------------------------------------------------*/
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
    /*-----------------------------------------------------------------------------------*/
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
            /* 修改图片资源的输出位置---------------------------------------------------------------*/
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            /*----------------------------------------------------------------------------------*/
            },
        ],
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode:"development"//开发模式
};
    1. 修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>Hello webpack!!</h1>
    <!-- css样式 -->
    <div class="box1"></div>
    <!-- less样式 -->
    <div class="box2">
        <div class="box3"></div>
    </div>
    <script src="../dist/static/js/main.js"></script>
</body>
</html>
    1. 运行指令
npx webpack

此时输出文件目录：（注意：需要将上次打包生成的文件清空，再重新打包才有效果）

├── dist
    └── static
         ├── imgs
         │    └── 7003350e.png
         └── js
              └── main.js

image

2.自动清空上次的打包内容

  • 只需要在webpack.config.js当中添加一个配置项(output里面)即可
output:{
    // 所有文件的输出目录,必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
    path: path.resolve(__dirname , "dist"),//绝对路径
    // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
    filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        
/*自动清空上次打包内容的配置项--------------------------------------------------------*/
    // 原理:在打包前,将path整个目录内容清空,在进行打包
    clean: true,
/*----------------------------------------------------------------------------------*/
},

3. 处理字体图标资源

    1. 下载字体图标文件
    1. 添加字体图标资源
    • src/fonts/iconfont.ttf
    • src/fonts/iconfont.woff
    • src/fonts/iconfont.woff2
    • src/css/iconfont.css
      • 注意字体文件路径需要修改
    1. 引入字体样式到main.js当中
// 引入js文件
import count from './js/count'
import sum from './js/sum'
// 引入css资源
import './css/index.css'
// 引入less资源
import './less/index.less'
// 引入字体样式(切记是字体样式并非字体)
import './css/iconfont.css'

console.log(count(3 , 1));
console.log(sum(1,2,3,4,5,6));
    1. 修改配置项
// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "dist"),//绝对路径
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        clean: true,//(自动清空上次打包内容) 原理:在打包前,将path整个目录内容清空,在进行打包
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            },
            // 4.处理字体资源
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",//这里的是改成"asset/resource"
                generator: {
                  filename: "static/media/[hash:8][ext][query]",
                },
            },
        ],
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode:"development"//开发模式
};

  • type: "asset/resource"和type: "asset"的区别：

    1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理

    2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

    1. 修改html(public/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>Hello webpack!!</h1>
    <!-- css样式 -->
    <div class="box1"></div>
    <!-- less样式 -->
    <div class="box2">
        <div class="box3"></div>
    </div>

    <!-- 使用字体图标 -->
    <i class="iconfont icon-aixin"></i>
    <i class="iconfont icon-bianji"></i>
    <i class="iconfont icon-Dyanjing"></i>
    <i class="iconfont icon-caidan"></i>
    <script src="../dist/static/js/main.js"></script>
</body>
</html>

结果展示:

image

处理其他资源

  • 处理其他资源同样是通过type: "asset/resource"这个接口

  • 比如我们要处理一些音频如mp3,avi等…只需要在该配置项的后面追加格式即可

配置项当中webpack.config.js

// 4.处理其他资源(字体,mp3,mp4,avi)
{
    test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//在这后面追加所需要处理的资源格式即可
    type: "asset/resource",//这里的是改成"asset/resource"
    generator: {
      filename: "static/media/[hash:8][ext][query]",
    },
},