webpack4 打包字体图标等其他资源

刺骨的言语ヽ痛彻心扉 2021-07-24 20:15 481阅读 0赞

iconfont举例
    	
    	1、下载图标代码到本地
    		(1)查看iconfont.css中需要的字体图标后缀名
    		(2)打开下载代码中的demo网址,字体图标名称按该网址中的来,iconfont官网内的项目图标名会和其有差异

![在这里插入图片描述][20210111212110196.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

2、下载
    		cnpm install -D file-loader
    		
    	3、配置
    		modules:{
    			rules:[
    				{
    			        test: /\.(ttf|eot|svg|woff|woff2)$/,
    			        loader:'file-loader',
    			        options:{
    			        	name:'[path][name].[ext]'，
    			        	outputPath:'src/icon'	 '从build目录下开始的输出路径'  输出路径如果name也写了路径,可能会有冲突
    			        }
    				}
    			]
    		}

代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
      entry: './src/index.js',
      output: { 
        filename: 'build.js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          },
          { 
            test: /\.(jpg|png|gif|jfif)$/,
            loader:'url-loader', //依赖于file-loader
            options: { 
              //图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
              limit: 8 * 1024,
              esModule: false,  //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
              name:'[path][name].[ext]'
            }
          },
          { 
            test: /\.html$/,
            loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
          },
          { 
            // exclude:/\.xx$/
            test: /\.(ttf|eot|svg|woff|woff2)$/,
            loader:'file-loader',
            options:{ 
            	name:'[path][name].[ext]'
            }
            
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template:'./src/index.html' //将模板复制成指定文件
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
      ],
      mode:'development'
    }

[20210111212110196.png]: /images/20210724/1a3b70d112f9466e9f5e62b646d6c4ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/1499188067754047b9015ea95c3f4529.png