webpack打包工具-基本配置

/*
 * @Author: HuangBingQuan bingquan111@qq.com
 * @Date: 2022-11-25 17:42:05
 * @LastEditors: HuangBingQuan bingquan111@qq.com
 * @LastEditTime: 2022-11-26 17:05:29
 * @FilePath: /webpack/02-setup-app/webpack.config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成html和引用js文件
module.exports = {
  // 打包的入口
  entry: './src/index.js', 
  output: {
    // 输出文件的名字
    filename: 'bundle.js',
    // 输出的位置（绝对路径）
    path: path.resolve(__dirname, './dist'),
    clean: true, // 每次打包后清理dist文件夹
    assetModuleFilename: 'images/[contenthash][ext]' // 打包图片资源后存放的位置
  },
  mode: 'development', // mode 模式 变为开发模式
  devtool: 'inline-source-map', // 精准定位代码的行数
  plugins: [ // 插件
    new HtmlWebpackPlugin({ // 自动化生成html并自动引入打包后的js
      // template: path.resolve(__dirname, './src/index.html'),
      template: './index.html', // 文件路径
      filename: 'app.html', // 输出的文件
      inject: 'body' // 自动生成的script标签 在什么位置
    })
  ],
  devServer: { // 装完webpack-dev-server后配置devServer检测文件的变化 从而重新编译
    static: './dist', // 创建服务指向./dist文件夹
    open: true 
  },
  // 配置文件资源
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource', // 可以生成一个单独的文件并导出url url是一个资源路径
        generator: {
          filename: 'images/[contenthash][ext]' // contenthash 生成一个随机hash作为资源文件名 ext 扩展名
        }
      },
      {
        test: /\.svg$/,
        type: 'asset/inline', // 可以导出一个资源的dataUrl 例如把.svg转成base64位的字符串
      },
      {
        test: /\.txt$/,
        type: 'asset/source', // 可以导出资源的源代码
      },
      {
        test: /\.jpg$/,
        type: 'asset', // 通用类型 自动选择
        parser: {
          dataUrlCondition: { 
            maxSize: 4 * 1024 * 1024  // 当图片大小大于4MB则生成一个资源文件否则生成base64
          }
        }
      }
    ]
  }
}