webpack -- entry入口挖坑

一、配置入口文件

在webpack.config.js文件配置入口文件 这里我们可以src里面新建几个js文件，作为入口文件输出 entry后面可以是入口文件路径的字符串 也可以是数组，数组会把多个路径整合到一个文件里面 也可以是对象，对象就相当于每个入口文件会被单独输出 正常的一般下面这种写法：

module.exports = { entry: { app: './src/index.js' } }

但是我们还是参照vue的写法

const config = { entry: { app: './src/index.js' } } module.exports = config

这里入口路径可以通过path来简化一下

const path = require('path') const config = { entry: { app: path.resolve(__dirname,'src/index.js') } }

二、对象语法

const path = require('path') const config = { entry: { app: path.resolve(__dirname, 'src/index.js') } } module.exports = config

这里需要注意下，在webpack 4.0以下版本中，会将第三方库作为入口起点，在webpack.optimize.CommonsChunkPlugin()里面使用，但是在webpack 4.0及以上中CommonsChunkPlugin被移除了，要使用optimization.splitChunks来将第三方库和主程序分离开，网上很多教程都是使用CommonsChunkPlugin

三、配置多页面引用程序

告诉 webpack 需要三个独立分离的依赖图

const path = require('path') const config = { entry: { app: path.resolve(__dirname, 'src/index.js'), main: path.resolve(__dirname, 'src/main.js'), test: path.resolve(__dirname, 'src/test.js') } } module.exports = config

Tips 使用 optimization.splitChunks 为页面间共享的应用程序代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益

转载于:https://www.cnblogs.com/zjh-study/p/10844806.html