vue

基本概念-entry

2017-07-02  本文已影响1人  大饼脸me

一、entry
用来定义入口文件,有三种格式:
1、字符串

entry: './src/app.js'

这种格式相当于

entry: {
  main: './src/app.js'
}

如果不指定打包的文件名,默认会打包成main.js

2、数组

entry: ['./src/app.js', './src/index.js']

这种情况会将两个文件都打包到main.js

3、对象

entry: {
  app: './src/app.js',
  main: './src/index.js'
}

这种情况会打包成两个文件,文件名对应key值

总结:

其实这三种写法原理都是一样的,前两种写法是第三种的简写,也就是说,如果不提供key值,就会默认对应到“main",打包后的文件名也会对应key值。

二、entry结合webpack插件CommonsChunkPlugin的用法:
1、单入口,可用vendors(名字可以随意取)指定一些公用的库,打包到vendors.js

entry: {
  app: './src/app.js',
  vendors: ['react', 'react-dom']
}
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors'   //名字要对应entry
});

2、多入口,提取入口文件的公共代码,打包到vendors.js

entry: {
  app: './src/app.js',
  index: './src/index.js'
}
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors',//指定打包的文件名
  chunk: ['app']     //指定要提取公共代码的入口文件,没有这一项配置可默认提取所有的入口文件
  minChunks:2   //指定要打包的文件数,具体用法后面补充
});
上一篇下一篇

猜你喜欢

热点阅读