一、entry 配置

1. 单个入口（字符串写法）

// src/app.js
console.log('11111111')

// webpack.config.js
module.exports = {
    entry: './src/app.js',
}

2. 多个入口（数组写法）

// src/app.js
import _ from 'lodash'
console.log('11111111')
console.log(_)

// src/app2.js
console.log('222222222')

// webpack.config.js
module.exports = {
    entry: ['./src/app.js', './src/app2.js'],    // 打包后的代码执行顺序会按照数组顺序从前往后执行
}

由于 app.js 中引入了 lodash 第三方库，所以打包出来的 bundle 中包含了 lodash 的代码。

3. 多个入口（对象写法）

// src/app.js
import _ from 'lodash'
console.log('11111111')
console.log(_)

// src/app2.js
console.log('222222222')

// webpack.config.js
module.exports = {
    entry: {
        main: ['./src/app.js', './src/app2.js'],
        lodash: 'lodash'
    },
}

多个入口的对象写法，会按照入口名称，分别打包出不同的 bundle。但是由于 app.js 中引入了 lodash，所以打包出来的 main.js 仍然包含了 lodash。

可以通过设置 dependOn 属性来解决这个问题：

// src/app.js
import _ from 'lodash'
console.log('11111111')
console.log(_)

// src/app2.js
console.log('222222222')

// src/app3.js
import _ from 'lodash'
console.log(_)

module.exports = {
    entry: {
        main: {
            import: ['./src/app.js', './src/app2.js'],
            dependOn: 'lodash'
        },
        main2: {
            import: './src/app3.js',
            dependOn: 'lodash'
        },
        lodash: 'lodash'
    },
}

在 main 与 main2 入口中，设置了 dependOn 属性，表示这两个入口的文件可能依赖了 lodash，这样一来，lodash 会单独打包且不会被打包到 main.js 和 main2.js 中。

二、配置 index.html 模板

<!-- test.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    </body>
</html>

// webpack.config.js
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'test.html',
            template: 'src/assets/test.html',
            title: 'test',
            chunks: ['main', 'lodash']    // 指定当前页面需要打包哪些 chunk，chunk 就是 entry 中的配置项，每一项就是一个 chunk
        })
    ]
}

三、多页面应用

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: {
        main: {
            import: ['./src/app.js', './src/app2.js'],
            dependOn: 'lodash'
        },
        main2: {
            import: './src/app3.js',
            dependOn: 'lodash',
            filename: 'chanel/[name].js'
        },
        lodash: {
            import: 'lodash',
            filename: 'common/[name].js'
        }
    },
    output: {
        clean: true
    },
    // 要生成多个 HTML 文件，就要在 plugins 中多次声明插件
    plugins: [
        new HtmlWebpackPlugin({
            title: '多页面应用',
            filename: 'index.html',
            template: './index.html',
            inject: 'body',
            chunks: ['main', 'lodash'],
            publicPath: 'http://www.a.com'
        }),
        new HtmlWebpackPlugin({
            title: '呵呵呵',
            filename: 'chanel/index2.html',
            template: './index2.html',
            inject: 'body',
            chunks: ['main2', 'lodash'],
            publicPath: 'http://www.b.com'
        })
    ]
}

18. 多页面应用