1. entry（入口）
指示 webpack 从哪个文件开始打包
2. output（输出）
指示 webpack 打包完的文件输出到哪里去，如何命名等
3. loader（加载器）
webpack 本身只能处理js、json等资源，其他资源需要借助loader，webpack才能解析
4. plugins（插件）
扩展 webpack 的功能
5. mode（模式）
主要有两种模式：
-开发模式：development
-生产模式及： production

Webpack 是基于 Node.js 运行的，所以采用 Common.js模块化规范

webpack.config.js

const path = require('path');

module.exports = {

    // 入口
    entry: './src/main.js', // 相对路径

    //输出
    output: {

        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'), // 绝对路径

        // 文件名
        filename: 'main.js'
    },

    // 加载器（loader）
    module: {
        rules: [
            // loader的配置
        ],
    },

    // 插件
    plugins: [
        // plugin插件的配置
    ],

    // 模式
    mode: 'development'
}

此处引入node.js的path模块，path.resolve(__dirname, 'dist') 
__dirname指的就是当前文件(webpack.config.js)所在的文件目录(demo文件夹)
并将内容输出到dist文件夹内

  const path = require('path'); 
  path.resolve(__dirname, 'dist'), // 绝对路径

当我们配置好webpack的配置文件，就可以使用 npx webpack 来进行打包了
而当我们使用下面的指令进行打包时，就不会去读取webpack.config.js中的webpack配置了

npx webpack ./src/main.js --mode=development  
                   或
npx webpack ./src/main.js --mode=production

开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式
这个模式下我们主要做两件事：

1. 编译代码，使浏览器能识别运行
   开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源
2. 代码质量检查，树立代码规范
   提前检查代码的一些隐患，让代码运行时能更加健壮。
   提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。