webpack入口（entry）配置学习

字符串或者数据配置入口文件

1. 用法：entry: string

// 简写方式
module.exports = {
  entry: './src/index.js',
};

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

2. 用法：entry:[string]

数组方式会把多个入口文件合并到一个”chunk“中

module.exports = {
  entry: ['./src/index.js', './src/index2.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true
  }
}

对象语法配置入口文件

用法：entry: { string | [string] } | {}

当你通过插件生成入口时，你可以传递空对象 {} 给 entry

const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js',
    main2: './src/index2.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true
  }
}

描述入口的对象

1. dependOn，当前入口所要依赖的入口，必须提前加载好
2. filename，输出的文件名
3. import，加载文件路径地址
4. runtime，是否抽取运行时代码到单独一个chunk，

1. dependOn和runtime不能同时出现
2. runtime不能设置一个已经存在的入口文件名称
3. dependOn不能设置循环引用

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = (env, argv) => {
    return {
        mode: argv.mode,
        entry: {
            lodash: 'lodash',
            main: {
                import: './src/index.js',
                dependOn: 'lodash'
            }
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].[contenthash:8].js',
            globalObject: 'this',
            clean: true
        },
        devServer: {
            hot: true
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    }
}

思考？

为什么需要存在多个entry入口配置项？

1. 分离 app(应用程序) 和 vendor(第三方库) 入口

在vendor文件中存入一些基本不会被修改的代码，打包成一个独立的chunk，名称的哈希值做到保持不变，使浏览器独立缓存它们，减少网络的请求，提升性能。(webpack4之后更加推荐使用splitChunks)

2. 设置多页面应用程序