盒子
盒子
文章目录
  1. entry

webpack打包第三方库

entry

1
2
3
4
5
6
7
module.exports = {
entry: './app.js',
output: {
path: './output',
filename: 'output-file.js'
}
}

会在生成output目录下面生成output-file.js文件

entry的三种形式

  • 字符串

entry: './app.js'

是对象形式

1
2
3
entry: {
main: './app.js'
}

的缩写

  • 数组
    1
    entry: ['jquery', 'lodash', 'react']

也是对象的缩写:

1
2
3
entry: {
main: ['jquery', 'lodash', 'react']
}

  • 对象

对象是最为通用的,上面的字符串和数组都是对象写法的简写,默认key为main,一下是对象的配置写法:

1
2
3
4
entry: {
vendor: ['axios', 'vue', 'vuex', 'vue-router'],
bundle: './main.js'
}

上述代码会生成两个文件,一个是第三方库的打包集合,一个是app的打包文件,通过这种方式能够减少打包后项目的体积,但是在index.html中必须先引入vendor.js文件,在引入bundle.js文件。

入口讲解文章

缓存vendor文件

支持一下
扫一扫,支持 Alin
  • 微信扫一扫
  • 支付宝扫一扫