浅谈webpack 四个核心概念之Entry
因为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官网的一个 例子
functionrequire(/*...*/){
constmodule={exports:{}};
((module,exports)=>{`请输入代码`
//模块代码在这。在这个例子中，定义了一个函数。
functionsomeFunc(){}
exports=someFunc;//也就是说你单独给exports赋值时候exports不属于module了是一个单独的变量
//此时，exports不再是一个module.exports的快捷方式，
//且这个模块依然导出一个空的默认对象。
module.exports=someFunc;//这里导出的函数是挂在module里的所以会被导入
//此时，该模块导出someFunc，而不是默认对象。
})(module,module.exports);
returnmodule.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文件，第三方模块，自定义公共模块）
constpath=require("path");
constwebpack=require("webpack");
constpackagejson=require("./package.json");
constconfig={
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:[
newwebpack.optimize.CommonsChunkPlugin({
name:'vendor',//指定已经存在的chunk这里指向的是vendor，
公共部分模块都会合并到这个chunk名对应的文件，不指定默认生成name为commons的chunk。
filename:'[name].js'//抽离出公共部分的文件名
}),
]
}
module.exports=config;
2.详细分离业务模块第三方依赖公共模块webpack运行文件
plugins:[//这一步把webpack运行文件抽离出来
newwebpack.optimize.CommonsChunkPlugin({//先抽离所用的公共模块
name:'vendor',
filename:'[name].js'
}),
newwebpack.optimize.CommonsChunkPlugin({//再指定vendor从中抽离webpack运行文件
name:'runtime',
filename:'[name].js',
chunks:['vendor']
}),
newwebpack.optimize.CommonsChunkPlugin({
name:['vendor','runtime'],
filename:'[name].js',
minChunks:Infinity//只有当入口文件（entrychunks）>=3才生效，
//用来在第三方库中分离自定义的公共模块
}),
newwebpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'[name].js',
minChunks:2,//默认为2，意思是模块被多少个chunk引用才被抽离
//由于common被first和second引用所以会被抽离
chunks:['first','second']//从first.js和second.js中抽取commonschunk
}),
]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。