webpack5配置，webpack.config.js

// 用来拼接绝对路径
const {resolve} = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 五个核心
  // 1. 入口文件
  entry: './src/main.js',

  // 2. 出口
  output: {
    filename: 'static/js/main.js', // 出口文件名，这样可以让js在js文件夹下
    // filename: 'main.js', // 出口文件名
    path: resolve(__dirname, 'dist'), // 出口路径
    clean: true // 自动清空上次打包的内容
  },

  // 3. loader的配置
  module: {
    rules: [
      // 详细的loader配置
      {
        test: /\.css$/, // 正则，匹配以.css结尾的文件
        use: [
          // loader执行顺序从下往上
          'style-loader', // 创建style标签，将js中的样式资源插入进去，添加到head中生效
          'css-loader' // 将css文件变成commonjs模块加载到js中，里边内容是样式字符串
        ]
      },
      {
        test: /\.(jpg|png)$/,
        type: 'asset',
        // 这样可以让图片在images文件夹下
        generator: {
          filename: 'static/images/[hash:10][ext][query]'
        }
      },
      {
        test: /\.(ttf|woff|woff2)$/,
        type: 'asset/resource',
        // 这样可以让字体图标在fonts文件夹下
        generator: {
          filename: 'static/fonts/[hash:10][ext][query]'
        }
      }
    ]
  },

  // 4. plugins的配置
  plugins: [
    // 打包后创建一个空的html文件（以./src/index.html为模板），会引入打包后的css,js等
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  // 5. 模式
  mode: 'development'
}

// 打包命令
webpack ./src/main.js -o ./dist/main.js --mode=development