0
点赞
收藏
分享

微信扫一扫

当下流行的打包工具Webpack从入门到熟练系统学习教程(五)webpack详细配置——entry和output

简单聊育儿 2022-05-01 阅读 32

上一篇:当下流行的打包工具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',
    },
举报

相关推荐

0 条评论