entry-----入口 详解4种情况
1、String --->entry:'./src/js/index.js'
单入口
打包形成一个chunk,输出一个bundle文件
此时chunk的默认名称是main
2、Array --->entry:['./src/js/index.js','./src/js/add.js']
多入口
所有的入口文件最终会形成一个chunk文件,输出出去只有一个bundle文件
只有一个用途:使用HMR功能html不能热更新的解决办法
---->['./src/js/index.js','./src/index.html'],
3、Object
entry:{
index:'./src/js/index.js',
add:'./src/js/add.js'
},
多入口
有几个入口文件就形成几个chunk,输出几个bundle文件
此时chunk名称就是key
4、特殊用法(在应用dll的时候使用)
entry:{
//形成一个chunk,输出一个bundle
index:'./src/js/index.js',
//所有js形成一个chunk,输出一个bundle
add:['./src/js/add.js','./src/js/count.js'],
//react:['react','react-dom']
},
output 中filename 命名
output:{
filename:'js/out.js',
path:resolve(__dirname,'dist')
},
output:{
//当为name时候,如果是入口为string,则为main.js
filename:'js/[name].js',
path:resolve(__dirname,'dist')
},
全面的output
output:{
//文件名称:指定名称+目录
filename:'js/[name].js',
//输出文件目录,将所有资源输出的公共目录
path:resolve(__dirname,'dist'),
//所有资源引入公共路径的前缀 'img/ss.png' =>'/img/ss.png'
//如果设置为<script src="/js/main.js"></script></body> 不设置为src="js/main.js"
publicPath:'/', //一般用于生产环境
chunkFilename:'js/[name]_chunk.js',//非入口chunk的名称 (import引入的被打包出的chunk,optimization 0_chunk.js
//library是结合Dll使用
library:'[name]',//如果不写,打包出的js文件是内部调用函数,外部不能调用(function(){})(参数)
libraryTarget:'window',//将library暴露出来的变量添加到window上browser
libraryTarget:'global',//放在node上
libraryTarget:'commonjs'//放在node上
},