SOURCE

//简单配置
module.exports = {
    mode: 'production',
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js',
    },
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    },
    plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
//高阶配置
module.exports = {
    mode: 'production',
    //描述入口的对象
    entry: {
        a2: 'dependingfile.js',
        b2: {
            dependOn: 'a2', //当前入口所依赖的入口。它们必须在该入口被加载前被加载。共享a2这个chunk模快
            import: './src/app.js',//启动时需加载的模块。
            filename: 'pages/catalog.js',//最终输出
        },
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js',
    },
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    },
    plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

<strong>1.webpack核心概念</strong>
<ul>
    <li>入口【entry】：入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。</li>
    <li>出口【output】：告诉 webpack 在哪里输出它所创建的 chunk，以及如何命名这些文件。</li>
    <li>装载【loader】：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。</li> 
    <li>插件【plugin】：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。</li> 
    <li>模式【mode】：通过选择 development, production 或 none 之中的一个，来设置 mode 参数。</li>
    <li>浏览器兼容【browser compatibility】：Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。</li>
    <li>环境【environment】：Webpack 5 运行于 Node.js v10.13.0+ 的版本。</li>
</ul>
<div>
    <strong>2.例子：查看js（一般我们使用的简单格式）</strong>
</div>
<br>
<div>
    <strong>3.详细介绍entry，其余模快单独介绍</strong>
</div>
<ul>
    <li>入口【entry】：如果传入一个字符串或字符串数组，chunk 会被命名为 main。
        如果传入一个对象，则每个属性的键(key)会是 chunk 的名称，该属性的值描述了 chunk 的入口点。
        如果传入一个对象，对象的属性的值可以是一个字符串、字符串数组或者一个描述符(descriptor)</li>
    <li>
        <strong> 描述入口的对象:</strong>
        <ul>
            <li>dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。表示共享模快</li>
            <li>filename: 指定要输出的文件名称。</li>
            <li>import: 启动时需加载的模块。</li>
            <li>library: 指定 library 选项，为当前 entry 构建一个 library。</li>
            <li>runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。
                在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。</li>
            <li>publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。</li>
            <li style="color:red">
                <ul>
                    <li>1.runtime 和 dependOn 不应在同一个入口上同时使用，所以如下配置无效，并且会抛出错误 </li>
                    <li>2.确保 runtime 不能指向已存在的入口名称，会抛出一个错误 </li>
                    <li>3.dependOn 不能是循环引用的，并且会抛出错误 </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>