Detailed process of multi-file packaging configuration in webpack

The difference between chunk and bundle

moudle - All source files, everything in webpack is a module
chunk - Multiple modules merged, such asentry, import(), splitChunk
bundle - Final output file

2. Multi-file packaging configuration

2.1

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')
 = {
    entry: {
        index: (srcPath, ''),
        other: (srcPath, '')
    },
    module: {
        rules: [
          // ---- Same as above ----        ]
    },
    plugins: [
        // Multi-entry - Generate        new HtmlWebpackPlugin({
            template: (srcPath, ''),
            filename: '',
            // chunks indicates which chunks to refer to (i.e., the index and other above) the page should refer to all by default.            // chunks: ['index'] // Quote only        }),
        // Multi-entry - Generate        new HtmlWebpackPlugin({
            template: (srcPath, ''),
            filename: '',
            // chunks: ['other'] // Quote only        })
    ]
}

The abovechunksConfigure, if notchunks, then the result of packaging is to introduce all js by default

<body>
    <p>webpack demo</p>
    <input type="text"/>
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src=""></script>
</body>

If chunks is configured, only the corresponding results will be introduced

<body>
    <p>webpack demo</p>
    <input type="text"/>
     <script type="text/javascript" src=""></script>
</body>

2.2

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')
 = smart(webpackCommonConf, {
    mode: 'production',
    output: {
        // filename: 'bundle.[contentHash:8].js', // When packaging the code, add hash stamp        filename: '[name].[contentHash:8].js', // name means the key of entry when multiple entrances        path: distPath,
        // publicPath: '' // Modify the prefix of all static files urls (such as cdn domain names), which cannot be used here for the time being    },
    module: {
        rules: [
            //Repeat code        ]
    },
    plugins: [
        new CleanWebpackPlugin(), // The folder will be cleared by default        new ({
            //  = 'production'
            ENV: ('production')
        })
    ]
})

When there are multiple entrances,outputExported【name】Variables will correspond to the variable name of the entrance

This is the end of this article about multi-file packaging in webpack. For more related webpack multi-file packaging content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!