webpack5 多入口

一、设置入口文件

// webpack.common.js

const srcPath = path.join(__dirname, '..', 'src');

module.exports = {
    entry: {
        index: path.join(srcPath, 'index.js'),
        other: path.join(srcPath, 'other.js')
    },
  
    // ...
}

设置入口文件为src目录下的index.js和other.js文件

二、配置对应的html文件

需要安装html-webpack-plugin插件

// webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const srcPath = path.join(__dirname, '..', 'src');


module.exports = {
    // ...

    plugins: [

        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
            chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other']  // 只引用 other.js
        })
    ]
}

三、配置出口文件

// webpack.prod.js

const distPath = path.join(__dirname, '..', 'dist');

module.exports = merge(webpackCommonConf, {
    
    // ...

    output: {
        filename: '[name].[contenthash:8].js',
        path: distPath,
    },
       
    // ...
})

在打包前需要将输出目录，这里是dist目录，里面的文件清空，需要安装clean-webpack-plugin插件

// webpack.prod.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')


module.exports = merge(webpackCommonConf, {
      
    // ....

    plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
          
        // ...
    ]
})