5大核心概念

1.mode(两种模式) 主要由两种模式

开发模式：develoment
生产模式：production

2.entry(入口)

只是Webpack从哪个文件开始打包

3.output(输出)

指示Webpack打包完的文件输出到哪里去，如何命名等

4.loader(加载器)

webpack本身只能处理js、json等资源，其他资源需要借助 loader，Webpack才能解析

5.plugins(插件)

扩展webpack功能

mode(两种模式)

develoment(开发模式)

便于代码调试以及实现浏览器实时更新，能够快速定位到错误的位置

production(生产模式)

为了实现缓存优化以及改善加载时间,我们把源文件会打包成更小的资源包

entry：入口起点

支持三种格式：

1、单入口

entry: './src/index.js'

打包形成一个chunk，输出一个bundle文件，此时chunk的名称默认是main

2、数组形式.多入口

entry: ['./src/index.js', './src/login.js']

所有入口文件最终只会形成一个chunk，输出去只有一个bundle文件，此时chunk的名称默认是main(会将login.js打包进index.js中)

3、对象形式：多入口

entry: {
    index: './src/index.js', 
    add: './src/login.js'
}

有几个入口文件就形成几个chunk，并输出几个bundle文件，chunk的名称是(index、login...)

通常第一种和第三种用的比较多。

output(输出)

output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        // 输出文件目录，将来所有资源输出的公共目录，所有资源都在这个文件夹下
        path: path.resolve(__dirname, "dist"),
        // filename: 输出文件名
        filename: "main.js",
      }

loader(输出)

module: {
  rules: [
      {
          // 检测 .css 文件
          test: /\.css$/,
          // 执行顺序 从右到左 从下到上
          use: [
              // 将对应文件内容打包放至html页面的style标签中
              'style-loader',
              // 将css资源编译成common.js的模块到js中
              'css-loader',
          ]
      },
      {
          // 检测 .sass | .scss 文件
          test: /\.s[ac]ss$/,
          use: [
              'style-loader',
              'css-loader',
              // 将sass编译为css
              "sass-loader",
          ]
      },
      {
          test: /\.(png|jpe?g|gif|svg|webp|ico)/, // 检测 png | jpe?g问号代表可有可无 | gif  | svg | webp | icon
          type: 'asset',
          parser: {
              dataUrlCondition: {
                  // 小于10kb转base64 
                  // 减少请求数量 但体积更大
                  maxSize: 10 * 1024
              }
          },
          generator: {
              // hash: 哈希值
              // ext: 文件扩展名
              filename: 'static/images/[name][ext]' // 创建文件
          },
      },
  ]
}

还有着许多的loader,我这里只是做个示范

plugins

// plugin 可以在webpack运行到某个时刻的时候，可以帮我们一些事情
    plugins: [
        new HtmlWebpackPlugin({  // HtmlWebpackPlugin可以帮我们生成hmtl文件
            template: 'src/index.html' // 这个使我们模块的路径 到时候可以把模板的内容加到我们自动生成的html中
        }),
        // CleanWebpackPlugin可以打包前帮我们把上一次dist文件删除掉// CleanWebpackPlugin可以打包前帮我们把上一次dist文件删除掉
        new CleanWebpackPlugin(['dist'])
    ]

我这里只是简单的介绍了
HtmlWebpackPlugin：打包后自动帮我们生成 html 文件，并帮我们引入打包生成的 js 文件
CleanWebpackPlugin:它可以帮我们自动删除dist文件夹(通常用于开发模式)
还有许多这样的插件给我们使用

webpack五个核心配置