浅谈webpack 四个核心概念之Entry

前端  /  管理员 发布于 5年前   876

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

webpack中文文档

一、module.exports

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入口起点,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    }),  ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 详解webpack的配置文件entry与output