前端工具webpack-基础使用第2篇

开门见山

今天继续给大家带来一些webpack相关的内容

文件资源加载器

//在项目中使用img、font、由于webpack无法识别这些文件，这时候我们要使用文件资源加载器file-loader
//安装依赖 yarn add file-loader --dev 

import createHeading from './heading.js';

import "./main.css"

import icon from './wolf.jpg';

const heading = createHeading();

const image = new Image()

image.src = icon;

document.body.append(image)

document.body.append(heading)

//webpack配置

const path = require('path');
module.exports = {
    mode: "none", //none/development/production
    entry: "./src/main.js", //项目的入口文件
    output: {
        filename: "bundle.js", //输出的文件名
        path: path.join(__dirname, 'dist'), //指定输出的路径,
        publicPath: "dist/", //此处的“/”不能省略
    },
    module: {
        rules: [{
                test: /.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /.jpg$/,
                use: 'file-loader'

            }
        ]
    }

}

//运行webpack即可

webpack url资源加载器

url资源加载器，本质上就是用url地址来表示图片或者是字体，默认转换成base64编码

webpack配置如下

const path = require('path');
module.exports = {
    mode: "none", //none/development/production
    entry: "./src/main.js", //项目的入口文件
    output: {
        filename: "bundle.js", //输出的文件名
        path: path.join(__dirname, 'dist'), //指定输出的路径,
        publicPath: "dist/", //此处的“/”不能省略
    },
    module: {
        rules: [{
                test: /.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /.jpg$/,
                use: 'url-loader'//使用url-loader而不是file-loader

            }
        ]
    }
}

//url-loader最佳实践方案

//小文件使用url-loader，减少请求次数

//大文件单独提取存放，提高加载速度 webpack配置如下

const path = require('path');
module.exports = {
    mode: "none", //none/development/production
    entry: "./src/main.js", //项目的入口文件
    output: {
        filename: "bundle.js", //输出的文件名
        path: path.join(__dirname, 'dist'), //指定输出的路径,
        publicPath: "dist/", //此处的“/”不能省略
    },
    module: {
        rules: [{
                test: /.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /.jpg$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 10 * 1024 //10KB 小于10KB使用url-loader，大于10KB使用file-loader
                            //超出10KB文件单独提取存放
                            //小于10KB文件转换成url嵌入代码中
                            //需要注意的是如果使用url-loader那你的项目中要安装file-loader 因为超出10KB
                            //还是会使用file-loader
                    }
                }
            }
        ]
    }
}

谢谢观看，如有不足，敬请指教

本文地址：https://blog.csdn.net/handsomezhanghui/article/details/109255862