webpack (三) -打包图片-配置加载器file-loader-把图片作为背景图使用 & 打包字体-在less文件引入字体格式，流程同打包图片

08-webpack-打包图片

第一步：在src/assets下，创建图片文件夹images,新建src/assets/images/logo.png文件

第二步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式图片文件，需要用对应的加载器插件处理该文件，把代码解析成js文件，才可以加载图片等格式文件

https://www.webpackjs.com/guides/asset-management/#加载图片

• 命令行(开发依赖)中安装图片加载包

npm install --save-dev file-loader

• webpack.config.js中配置文件

onst path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
		   //加载后缀名.png|svg|jpg|gif 等图片格式文件
+         test: /\.(png|svg|jpg|gif)$/,
		  //使用图片加载器  加载图片
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

第三步：把图片作为背景图使用，让less文件生效，同样在src/index.js入口文件中进行引入less文件

第四步：手动修改html文件路径

第五步：命令行运行代码，图片预览成功

注意：

此种手动修改index.html文件的路径，非正常操作方式

09-webpack-打包字体文件

第一步：在src/assets下，创建字体文件夹fonts,新建src/assets/fonts/font.ttf文件

第二步：在src/styles/index.less中：

// 定义一个字体
@font-face{
  font-family: "hm-79";    //字体名字
  src: url(../assets/fonts/font.ttf) format('truetype');   //路径和固定格式
}
// 使用这个字体  所有p标签
p{
  font-family: hm-79
}

第三步：在新复制的dist/index.html中，对比字体样式

第四步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式字体文件，需要用对应的加载器插件处理该文件，把代码解析成js文件，才可以加载图片等格式文件

https://www.webpackjs.com/guides/asset-management/#加载字体

• 命令行(开发依赖)中安装字体加载包file-loader，打包图片时已安装则忽略

npm install --save-dev file-loader

• webpack.config.js中配置文件即可

+       {
		  //加载后缀名.woff|woff2|eot|ttf|otf 等字体格式文件
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
		  //使用字体加载器  加载字体
+         use: [
+           'file-loader'
+         ]
+       }

第五步：命令行运行代码，打包

npm run build

打包成功后，dist文件夹下会生成一个字体文件

打开新复制的dist/index.html，验证字体样式对比