问题

假如我们直接引入一张图片，类似于

是无法引入成功的
需要通过js来import并且通过file-loader来转译（得到的只是图片的路径），事实上，只要我们在js中引入正确，他就会得到正确的路径，并且进行转译。
注意：file-loader生成的图片的名字是自带hash的，因此可以直接用于缓存的更新。

使用方法

1.安装

$ npm install file-loader --save-dev

2.配置webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

3.js中引入图片

import img from './assets/1.png'
const div = document.querySelector('div');
div.innerHTML = `<img src="${img}" >`

懒加载

在js中使用import函数加载js是一个异步过程，我们使用一个按钮去触发，使它在我们需要的时候进行加载，这样即使一个懒加载过程
注意：import函数返回一个promise，因此需要我们设置then方法。我们引入文件时的then方法中，他返回的是一个成功状态且值为module的primise，可以在then的参数中传入peomise的valve，并使用module.default调用。
下面是lazy.js的内容

let a = 1;
export default a;

下面是index.js的内容

const button = document.createElement('button')
document.body.appendChild(button)
button.textContent = '懒加载'
button.onclick = () =>
{
    const lazy = import('./lazy.js')
    lazy.then((module) =>
    {
        console.log('成功啦');
        console.log(lazy);
        console.log(module.default);
    })
}

点击按钮结果如图