webpack 如何导入资源模块和加载器

最新推荐文章于 2024-05-17 08:11:10 发布

葡萄籽籽

最新推荐文章于 2024-05-17 08:11:10 发布

阅读量241

点赞数 1

分类专栏： IT 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43816709/article/details/119062011

版权

IT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

webpack导入资源模块

//webpack.config.js
const path = require('path')
module.exports = { 
    mode:'none',
    entry:"./src/main.js",//入口文件改为main.js
    output:{ //出口文件
        filename:"bundle.js",
        path:path.join(__dirname,'dist')//绝对路径
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader',

                ]
            }
        ]
    }
}
//main.js
import createHeading from './heading.js'
import './main.css'//导入css文件
const heading = createHeading()
document.body.append(heading)
//heading.js
import './heading.css'
export default()=>{ 
   const element = document.createElement('h2')
   element.textContent = 'Hello world'
   element.classList.add('heading')
   element.addEventListener('click',()=>{
       alert('hello world')
   })
   return element
}

//传统做法是样式行为分离开，webpack建议我们在js代码中引入我们需要的任意资源
//js驱动整个前端应用

webpack文件资源加载器

//导入图片时，webpack默认加载器无法识别，所以需要我们下载file-loader 
yarn add file-loader --dev
//main.js
import createHeading from './heading.js'
import icon from './icon.jpg'
import './main.css'
const heading = createHeading()
const img = document.createElement('img')
img.src = icon
document.body.append(img)
document.body.append(heading)
//webpack.config.js
const path = require('path')
module.exports = { 
    mode:'none',
    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加载器（data urls和url-loader）

data urls 是一种特殊的url，它可以直接表示一个文件，传统的url一般要求有服务器上有一个对应的文件，通过请求地址得到对应的文件，data urls是一种当前urls可以表示文件内容的方式，使用时不会发生任何http请求,适合体积比较小的资源，可以减少http发送次数，大文件单独提取存放，提高加载速度

const path = require('path')
module.exports = { 
    mode:'none',
    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',
                   option:{ 
                       limit:10 * 1024//url-loader 10kb 以下使用，10kb以上的依旧使用file-loader
                   }
                }
                    
                
            },
        ]
    }
}