欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 19:43:03
开门见山今天继续给大家带来一些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 = createH....

前端工具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