首先有必要说明一下，本文侧重讲解webpack基本配置属性，不附带实例，将会以通俗易懂的形式地讲解；如若需要实例进行相关练习，可将本文作为理论基础；

　　Webpack是前端项目自动化构建工具，本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。（官网定义）。

　　那么用我们人话来说：webpack是一个前端模块化的解决方案，更侧重点打包，可以把开发中的资源文件（图片、js文件、css文件等）看成是一个个的模块，然后通过webpack提供的loader（加载器）和plugins（插件）来进行处理、合并以及压缩，打包成符合生产环境、体积更小的文件资源，以方便提升浏览器的渲染速度；

　　首先我们要理解一下webpack的四大核心概念：

　　　　入口（entry）

　　　　出口（output）

　　　　loader（加载器）

　　　　plugins（插件）

　　入口（entry）：　

　　　　webpack入口指的是通过配置来指示webpack的入口文件，即从哪里开始，我们可以在webpack中配置entry属性，来指定入口文件的路径；

　　　　　我们可以看一个简单的案例：

//必须将模块抛出webpack才能访问得到module.exports = {   //entry属性指定入口文件    值为相对路径    entry: './src/app.js' }

　　出口（output）：

　　　出口即告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，输出的文件目录路径；也就是说在你用webpack打包的时候可以通过添加output属性，来设置最终经过webpack打包输出后的文件名以及输出路径；

//引入node的path模块const path = require('path');  module.exports = {   // webpack执行入口文件  entry: './src/app.js',    //出口   output: {     // 把所有依赖的模块合并输出到一个 bundle.js 文件    filename: 'bundle.js',     // 输出文件都放到 dist 目录下   //__dirname是node环境中全局变量，表示当前目录    path: path.resolve(__dirname, './dist'),   } };

　　加载器（loader）：

　　　　　loader是让webpack能够去处理一些非Javscript类型的文件（webpack自身只能够识别原生JS和ES5），loader可以将所有类型的文件转为webpack能处理的有效模块，然后就可以通过webpack的打包能力，对这些文件进行处理；loader的配置有两个选项：

　　　　　test：一般都是正则表达式，用于匹配文件类型；

　　　　　use：可以是key：value的形式也可以是数组，用来告诉webpack使用什么loader来加载文件

//引入node的path模块const path = require('path');  module.exports = {   // webpack执行入口文件  entry: './src/app.js',    //