通常学习webpack总会想到四个重要的概念： 入口（即要打包的入口文件的路径） 出口（即要生成的文件的路径以及文件名） loader（loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）） 插件（插件接口功能极其强大，可以用来处理各种各样的任务。）
const path=require(‘path’);
module.exports={ entry:’./input.js’, output:{ path:path.resolve(__dirname,‘dist’), filename:‘output.bundle.js’ }, mode:‘development’, module:{ rules:[ { test:/.(png|jpg|gif)$/i, use:[ { loader:‘url-loader’, options:{ limit:8192 } } ] } ] } }; 在上述代码中entry即为入口文件，output即为出口文件，mode为你要什么模式，通常我们在日常开发中都是development，在产品上线时要改为production，module中说明了你要处理的文件需要用到的规则（test为正则表达式匹配相应的文件，上述test则匹配文件后缀为.png/.jpg/.gif的文件），接着use中说明了使用的loader以及limit(对文件大小的限制，此处最大只能处理8k的图片)
2.loader的类型有很多种，通常我们在使用它们之前都需要安装 （npm install xxx-loader --save-dev）
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去 source-map-loader：加载额外的 Source Map 文件，以方便断点调试 image-loader：加载并且压缩图片文件 babel-loader：把 ES6 转换成 ES5 css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。 eslint-loader：通过 ESLint 检查 JavaScript 代码参考官方文档
