上一篇:当下流行的打包工具Webpack从入门到熟练系统学习教程(四)webpack性能优化
参考目录
1.entry(入口起点)
1.string写法:
entry: './src/index.js',
单入口 打包形成一个chunk 输出一个bundle文件 这个bundle默认是main
2.array写法:
entry: ['./src/index.js', './src/add.js'],
多入口 所有文件最终只会有一个chunk 输出只有一个bundle文件
3.object写法:
entry: {
index: './src/index.js',
add: './src/add.js'
},
有几个入口文件最终就会形成几个chunk 输出几个bundle文件 此时chunk名为key
2.output(输出)
文件名称 (指定名称+目录)
filename: '[name].js',
输出文件目录 (将来所有资源输出的公共目录)
path: resolve(__dirname, 'build'),
将所有资源引入公共路径前缀
publicPath: '/',
非入口chunk的名称
chunkFilename: 'js/[name]_chunk.js',
向整个库向外暴露的变量名
library: '[name]',
变量名添加到browser
libraryTarget: 'window',
变量名添加到node
libraryTarget: 'global',
output: {
// 文件名称 (指定名称+目录)
filename: '[name].js',
// 输出文件目录 (将来所有资源输出的公共目录)
path: resolve(__dirname, 'build'),
// 将所有资源引入公共路径前缀
publicPath: '/',
// 非入口chunk的名称
chunkFilename: 'js/[name]_chunk.js',
// 向整个库向外暴露的变量名
library: '[name]',
// 变量名添加到哪个browser
libraryTarget: 'window',
// 变量名添加到哪个node
libraryTarget: 'global',
},