webpack搭建svg环境

webpack5搭建svg环境

svg是矢量图。使用svg画的图片，不会怎么放大，都不失真
1: svg 可以通过img标签加载
2: svg 可以作为字体图标
3: svg 可以用在大屏可视化上做各种标记点。

进阶:将svg做成icon 组件，并使用webpack搭建环境 …编辑中…

开发实例代码如下

// user.svg
<svg class="icon" verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
stroke="#000">
  <circle cx="12" cy="12" r="10"/>
</svg>

// index.js
import svg from'./index.svg'

const div = document.createElement("div");
div.style.width = '300px';
div.style.height = '300px';
div.style.border = '3px solid red';
div.style.background = `url(${svg})`;
var body = document.querySelector("body")
body.appendChild(div)

初始项目

npm init

初始化安装依赖

npm i --save-dev webpack webpack-cli html-webpack-plugin

初始化webpack.config.js文件

const path = require('path')
const  htmlwebpackPlugin   = require('html-webpack-plugin')

module.exports={
    mode:'development',
    entry:'./src/index.js',
        output:{ //出口
            path:path.resolve(__dirname,'./dist'), //出口文件夹名
    
            filename:'[name].js',//入口文件编译
    
        },
     
          plugins:[
             new htmlwebpackPlugin({
                template: './index.html',
                filename:'index.html',
             })
          ]
    
}

配置 svg

      module: {
            rules: [
              {
                test: /\.svg$/,
                //  use: ['svg-inline-loader']
                type:'asset/inline'
              },
            ],
          },

运行 webpack

npx webpack

运行打包后的代码，测试是否有问题