webpack配置多入口

有些项目中，一个项目中要产出多个页面，这时怎么打包？

1、entry入口中要建多个入口文件

使用path前先引入path
const path = require(‘path’)

entry: {
        index: path.join(srcPath, 'index.js'),
        other: path.join(srcPath, 'other.js')
    },

2、修改output

output放在webpack.prod.js中；
为了使多个filename不重名，使用了中括号报了一个name变量[name]
name就是entry中的key，如上例中的index、other

output: {
        filename: '[name].[contentHash:8].js', 
        path: distPath,
    },

3、为每个入口文件生成一个html

webpack.common.js
在pugins中，针对每个入口文件都要 new HtmlWebpackPlugin插件实例
chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），不写的话默认是全部引用，把入口的全部引入

plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other']  // 只引用 other.js
        })
    ]

4、npm run dev