webpack二刷笔记(2)webpack的核心概念-入口(entry)、输出(output)

webpack配置文件

// webpack.config.js
    module.exports = {
        mode: "node",   // 模式
        entry: "",      // 入口配置
        output: {}      // 输出配置
    }

entry配置单人口

// webpack.config.js
    module.exports = {
        entry: "/src/index.js",
        /**
         * 入口文件指定为项目src目录下的index.js文件
         * 用来指定webpack的打包入口
         * 对于非代码的图片字等体依赖也会不断加入到依赖图中
        */
    }

entry配置多页面应用入口

// webpack.config.js
    module.exports = {
        entry: {
            app: "./src/index.js",
            main: "./src/main.js"
        }
        /**
         * 多入口 entry 是一个对象
        */
    }

output最小配置输出打包后的文件

// webpack.config.js
    module.exports = {
        entry: {
            app: "./src/index.js"
        },
        output:{
            filename: "bundle.js" // 指定生成的文件的文件名为bundle.js
        }
    }

output多入口打包

// webpack.config.js
    module.exports = {
        entry: {
            app: "./src/index.js",
            main: "./src/main.js"
        }
        output:{
            path: __dirname + '/dist',
            filename: "[name].bundle.js"  // 通过 [name] 占位符确保文件名称唯一性
        }
    }
    // 打包后生成文件输出到目录 /dist 下；分别为 ./dist/app.bundle.js, ./dist/main.bundle.js

output配置js文件的哈希指纹（打包后输出文件名的后缀）

chunkhash只和webpack打包的chunk有关，不同的文件会生成不同的chunkhash值。

// webpack.config.js
    module.exports = {
        entry: {
            app: "./src/index.js",
            main: "./src/main.js"
        }
        output:{
            path: __dirname + '/dist',
            filename: "[name].[chunkhash:20].js"  // 通过chunkhash来配置输出文件的hash值,20表示保留hash值前20位
        }
    }

entry参考：https://www.webpackjs.com/concepts/entry-points/
output参考：https://www.webpackjs.com/concepts/output/
chunkhash参考: https://webpack.docschina.org/configuration/output/#outputchunkfilename