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。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益