webpack配置–entry(入口起点)详细配置-单入口|多入口

webpack配置–entry(入口起点)详细配置-单入口|多入口

webpack配置开始需要准备：(按照步骤可运行)

1、全局安装 webpack 和 webpack-cli 两个包;

cnpm i webpack webpack-cli -g

2、新建一个文件夹(不要有特殊字符)

3、在当前文件夹人运行终端(cmd)：

cnpm init -y
cnpm i webpack webpack-cli html-webpack-plugin clean-webpack-plugin path -D
// 到这里基础的包下载完成

4、新建 webpack.config.js 文件 粘贴以下内容

​ 依次打开entry的注释来进行验证，就可以看到相应的区别

const { resolve } = require("path");// 路径处理
const htmlWebpackPligins = require("html-webpack-plugin");// html模板
const { CleanWebpackPlugin } = require("clean-webpack-plugin")// 清空上次打包内容
/* 
    entry: 入口起点
    1.string --> "./src/main.js" -- 单入口
        打包形成一个chunk。输出一个bundle文件。
        chunk默认的名称是 main
    2.array --> ["./src/add.js", "./src/main.js"] -- 多入口 (用途-html不能热更新,引入html文件让HMR功能生效)
        打包形成一个chunk。输出一个bundle文件。
        chunk默认的名称是 main
    3.object --> { main: "./src/main.js", add: "./src/add.js", } -- 多入口 
        引入几个文件就生成几个chunk,同样输出同等数量的bundle文件
        此时chunk的名称为key值
    4.object[Array] --> { main: ["./src/main.js"], option: ["./src/add.js", "./src/count.js"], } -- 多入口
        一个{key:value}为一个chunk,输出一个bundle文件
        此时chunk的名称为key值
*/
module.exports = {
    // entry: "./src/main.js",
    // entry: ["./src/main.js", "./src/add.js"],
    // entry: { main: "./src/main.js", add: "./src/add.js", },
    entry: { main: ["./src/main.js"], option: ["./src/add.js", "./src/count.js"], },// 推荐（可以将多个包打包成一个chunk,又提高了可维护性）
    output: {
      	// 文件输出名称
        filename: "[name].[hash:8].js",// [name] -- entry中相应的key; [hash:8] -- 生成8位哈希值; 例: main.dff06b57.js
      	// 打包后文件输出位置
        path: resolve(__dirname, "dist")
    },
    plugins: [
        new htmlWebpackPligins(),// 使用生成html模板的插件
        new CleanWebpackPlugin(),// 使用打包后删除上一次打包文件的插件
    ],
    mode: "development", // 打包模式 development 开发模式(可读性高,代码体积大)  |  production 生产模式(可读性差,代码体积小)
}