webpack的基础使用方法

// 初始化
yarn init -y

// 生成一个 package.json # 项目依赖、定义快捷脚本（scripts）、配置项目基础信息（名称、版本、入口）
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", 设为 index.js，Node.js 运行时会优先加载这个文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.22.0"
}

pnpm add webpack webpack-cli -D
//webpack-cli：webpack 本身是个核心库，没有 cli 的话，你无法在命令行直接调用 webpack 命令

pnpm webpack
//生成一个dist目录，里面有一个main.js,就是index.js打包后的产物
// pnpm build

const path = require("path")
// 引入html插件
const HTMLPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development", // 设置打包的模式，production表示生产模式  development 开发模式
    // entry: "./hello/hello.js", // 用来指定打包时的主文件 默认 ./src/index.js
    // entry: ["./src/a.js", "./src/b.js"],
    // entry: {
    //     a_newName: "./src/a.js",
    //     b_newName: "./src/b.js"
    // },
    // entry: "./src/a.js",

    output: {
        // path: path.resolve(__dirname, "dist"), // 指定打包的目录，必须要绝对路径
        // filename: "main.js", // 打包后的文件名
        // filename:"[name]-[id]-[hash].js",
        clean: true // 自动清理打包目录
    }, // 配置代码打包后的地址
    /* 
    webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader

    - 以css为例：
        - 使用css-loader可以处理js中的样式
        - 使用步骤：
            1.安装：yarn add css-loader -D
            2.配置：
                module: {
                    rules: [
                        {
                            test: /\.css$/i,
                            use: "css-loader"
                        }
                    ]
                }
*/
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpg|png|gif)$/i,
                type: "asset/resource" // 图片直接资源类型的数据，可以通过指定type来处理
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    },

    plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",
            template: "./src/index.html"
        })
    ],

    devtool: "inline-source-map"
}

entry: ["./src/a.js", "./src/b.js"],

entry: {
  a_newName: "./src/a.js",
  b_newName: "./src/b.js"
},
    // output 保持：filename: 'js/[name].js'

// 指定输出目录
const path = require('path');

module.exports = {
    entry: {
      home: './src/home.js',
      detail: './src/detail.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),// 1. 输出目录（必填，必须是绝对路径）
      // 多入口会生成 home.xxx.js、detail.xxx.js
      filename: 'js/[name].[contenthash:8].js', // [contenthash:8] 取哈希前8位，缩短文件名
      clean: true
        
    }
};

filename: 'js/[name].[contenthash].js',
  // 场景1：CDN 部署（最终资源路径：https://cdn.example.com/js/home.xxx.js）
publicPath: 'https://cdn.example.com/',

    module: {
        rules: [
            {
                test: /\.css$/i,  // 正则表达式
                exclude: /node_modules/, // 排除不需要处理的文件（可选）
                include: path.resolve(__dirname, 'src'), // 只处理指定目录的文件（可选）
                use: ["style-loader", "css-loader"] // css-loader是打包，style-loader是css生效
            },
            {
                test:/\.(jpg|png|gif)$/i,
                type:"asset/resource" // 图片直接资源类型的数据，可以通过指定type来处理
            }
        ]
    }