webpack-四个核心概念之Entry

jiezi

5 年前

因为 webpack 是基于 nodejs 的一款工具，所以在学习过程中涉及到的 nodejs 知识也会进行解释进行发散性拓展。
webpack 中文文档

 module.exports = {entry: './path/to/my/entry/file.js'};

exports 变量是在模块的文件级作用域内可用的，且在模块执行之前赋值给 module.exports 在 nodejs 中，提供了 exports 和 require 两个对象，其中 exports 是模块公开的接口，require 用于从外部获取一个模块的接口，即所获取模块的 exports 对象。而在 exports 抛出的接口中，如果你希望你的模块就想为一个特别的对象类型，请使用 module.exports；如果希望模块成为一个传统的模块实例，请使用 exports.xx 方法；module.exports 才是真正的接口，exports 只不过是它的一个辅助工具。最终返回给调用的是 module.exports 而不是 exports。这里引用 nodejs 官网的一个例子

     function require(/* ... */) {const module = { exports: {} };
          ((module, exports) => {` 请输入代码 `
          // 模块代码在这。在这个例子中，定义了一个函数。function someFunc() {}
            exports = someFunc;// 也就是说你单独给 exports 赋值时候 exports 不属于 module 了是一个单独的变量
        // 此时，exports 不再是一个 module.exports 的快捷方式，// 且这个模块依然导出一个空的默认对象。module.exports = someFunc;// 这里导出的函数是挂在 module 里的所以会被导入
        // 此时，该模块导出 someFunc，而不是默认对象。})(module, module.exports);
      return module.exports;// 这里是这句话的解释（最终返回给调用的是 module.exports 而不是 exports）}

entry 入口起点,entry 所配置的文件路径所指向的文件为项目的入口文件也就是内部依赖的开始会根据入口文件去逐层加载依赖。Chunk 和打包时入口文件配置有关如果 entry 是一个 string 或 array，就只会生成一个 Chunk，这时 Chunk 的名称是 main，如果 entry 是一个 object，就可能会出现多个 Chunk，这时 Chunk 的名称是 object 键值对里键的名称。

entry 接受三种类型值

1. 单入口写法 String 例：entry: './app/to/my/entry/file.js'
    entry：{main:"'./app/to/my/entry/file.js'"}
2. 单入口数组写法 Array 例：entry：['./app/entry1', './app/entry2']
    在你想要多个依赖文件一起注入，并且将它们的依赖导向 (graph) 到一个“chunk”时，传入数组的方式就很有用。也就是说合并了多个文件的依赖模块。3. 对象语法 Object 例：entry：{a: './app/entry-a', b: ['./app/entry-b1', './app/entry-b2']}

分离第三方模块和公共模块
分离第三方模块和 webpack 运行文件等类似公共模块是为了避免加载等问价过大等待时间长的优化，当你不同的入口文件都依赖了相同的第三方模块这时候需要把他们抽离出来。这里主要应用了 entry 的对象语法和 CommonsChunkPlugin。实际应用举例：

1. 分离业务模块和公共模块（webpack 文件，第三方模块，自定义公共模块）





const path = require("path");
const webpack = require("webpack");
const packagejson = require("./package.json");
const config = {
entry: {
    first: './src/first.js',// 引入了 common.j 和 vue.js
    second: './src/second.js',// 引入了 common.j 和 vue.js
    vendor: Object.keys(packagejson.dependencies)// 获取生产环境依赖库的
    // 模块名称，返回一个数组，这里涉及的是单入口数组写法将多个依赖合并到一个 chunk 中
    // 在这里 vue 作为第三方库会被合并
},
output: {path: path.resolve(__dirname,'./dist'),
    filename: '[name].js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',// 指定已经存在的 chunk 这里指向的是 vendor，公共部分模块都会合并到这个 chunk 名对应的文件，不指定默认生成 name 为 commons 的 chunk。filename: '[name].js'// 抽离出公共部分的文件名
    }),
]
}

module.exports = config;

2. 详细分离业务模块第三方依赖公共模块 webpack 运行文件

plugins: [// 这一步把 webpack 运行文件抽离出来
        new webpack.optimize.CommonsChunkPlugin({// 先抽离所用的公共模块
            name: 'vendor',
            filename: '[name].js'
        }),
        new webpack.optimize.CommonsChunkPlugin({// 再指定 vendor 从中抽离 webpack 运行文件
            name: 'runtime',
            filename: '[name].js',
            chunks: ['vendor']
        }),
         new webpack.optimize.CommonsChunkPlugin({name: ['vendor','runtime'],
        filename: '[name].js',
        minChunks: Infinity// 只有当入口文件（entry chunks）>= 3 才生效，// 用来在第三方库中分离自定义的公共模块
        }),
        new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        filename: '[name].js',
        minChunks:2,// 默认为 2，意思是模块被多少个 chunk 引用才被抽离
        // 由于 common 被 first 和 second 引用 所以会被抽离
        chunks: ['first','second']// 从 first.js 和 second.js 中抽取 commons chunk
        }),
    ]

–by JK 2019 06 11 学习笔记

webpack-四个核心概念之Entry

一、module.exports

二、entry