1. webpack是什么

 按照官方的定义：webpack是一种静态资源的打包器。比如说有两个模块都通过CJS或者是ESM引入了一些js库，通过webpack就可以将引入的这些js库打包到bundle中去。再比如，要通过require的方式引入一个非js的文件，也可以通过webpack来转换为可以让其直接引用的模块

2. webpack中的入口input、出口output、loader、plugin各个都是些什么

• 入口input：webpack构建模块依赖图的起点，webpack会从这里开始打包模块需要的静态资源文件
• 出口output：webpack打包后的bundle的输出位置和名字
• loader：能让webpack处理各种各样的文件的工具或者说是模块，比如React的JSX，就需要一个react-loader来进行处理
• plugin：拓展webpack的一些插件，常用的会紧接着补充

3. webpack中的loader

 loader可以让webpack打包各种各样的文件，img，ttf，css，jsx等等。在使用这些资源的时候可以直接的import到相应的模块中去。在官方文档中将一个文件引入另一个文件这种关系称之为依赖关系。webpack可以自动的生成一张各种文件之间依赖关系的图（依赖图）

---

首先，我创建了一个项目

只要关心app文件夹和public文件夹以及webpack.config.js文件

app文件夹中的entry.js代码

import greet from './greet'
import Image from '../res/tetris.png'

const ImageDom = document.createElement('img');
ImageDom.src = Image;

document.getElementById("container").appendChild(greet());
document.getElementById("container").appendChild(ImageDom);

我的目标是直接通过import引入一张图片，图片在res文件夹下。现在就需要fs-loader来完成这个任务了

在webpack.config.js中要这样配置

module.exports={
    entry:__dirname+"/app/entry.js",   //入口文件
    output:{                           
        path:__dirname+"/public",      //输出文件的存放位置
        filename:"bundle.js"           //输出文件的名称
    },
    module:{
        rules:[
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
                ]
        }
}

module是要使用的webpack模块，rules是对应的*-loader匹配的规则，里面test（条件）可以填写正则表达式，字符串等。use为loader的入口，表示你要用什么loader来处理

这样就很容易的完成了webpack的配置及简单的使用

简单的了解解决不了实际情况下的复杂问题，你要问我要不要来点复杂问题的例子，我只能说我的复杂问题不是你的，你的不是我的，要不断实践去解决自己的问题