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
开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式
这个模式下我们主要做两件事：
- 编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源- 代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
