Webpack探索【4】--- entry和output详解

本文主要讲entry和output相关内容。

一 简介 

entry用来指定Webpack的打包入口。

二 为什么需要entry？

这个需要从Webpack打包机制上说明，大家都知道，Webpack的打包的核心原理：一切皆模块。而到底打包那些东西，这些东西之间的依赖关系是什么样的，都源于模块依赖图中的依赖树，而这个树的根节点就是这个entry。

上图中入口就是左上角的.js文件。

三 entry语法

这部分详细可以参考Webpack官网，这里这是笔者试炼时做的笔记。

3.1 单入口

単入口有两种写法：

'use stract';

const path = require('path');

module.exports = {
    // entry: './src/index.js', // 第一种写法
    entry: { // 第二种写法
        index : './src/index.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // filename: "bundle.js"
    },
    mode: "development", //"production",
};

注意，如果没有配置output的filename，上边构建出来的dist中文件名是index.js。

3.2 多入口

'use stract';

const path = require('path');

module.exports = {
    entry: {
        index : './src/index.js',
        hello: './src/helloworld.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // filename: "bundle.js"
    },
    mode: "development", //"production",
};

注意：上述多入口模式下，打出来的包有两个文件：index.js和hello.js，就是对应entry对象的key。而打包出来的这两个文件，是两个完全独立的包，里边各自包含了Webpack组织包的各种方法，也就是说这两个包是没有任何关系的两个包。

 四 output语法

output用来告诉Webpack如何将编译后的文件输出到磁盘中。

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

• filename： 用于输出文件的文件名。
• path：目标输出目录 path 的绝对路径，这个绝对路径指相对于磁盘的（例如：当前工程在D盘，如果设置path为'/dist'，打包的文件将会放在‘D:\dist’目录下），一般情况都使用path.join(__dirname, 'dist')方式设置路径，确保工程在任何目录下都能正常放置到当前工程的dist文件夹中。

4.1 单入口时output写法

'use stract';

const path = require('path');

module.exports = {
     entry: './src/index.js', // 第一种写法
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
    mode: "development", //"production",
};

注意：如何filename不设置，打包后的dist目录下，是main.js。即单入口情况下，filename的默认值是‘main.js’。

4.2 多入口时output写法

这时filename的值采用占位符写法：

'use stract';

const path = require('path');

module.exports = {
    entry: { // 第二种写法
        index : './src/index.js',
        hello: './src/helloworld.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "[name].js"
    },
    mode: "development", //"production",
};

此时，打包出来的dist目录下，有两个文件index.js和hello.js。两个都是独立的文件。

注意1：上边占位符[name]中name是固定的，不能随意写成其它值。

注意2：这种多入口设置output方法，实际filename是可以不设置的，不设置情况下打包后dist目录和当前设置时一致的。即多入口情况下，filename的默认值是'[name].js'。

4.3  CDN 和资源 hash 的复杂用法

具体参考Webpack官网，目前笔者还没用到，后续用到后再详细分析说明。、

https://www.webpackjs.com/concepts/output/

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}