webpack打包多页应用，为什么不同的入口(html)文件会引用不相关的js文件？

Question

想联系一下webpack的使用方式，所以抛弃了任何手脚架工具，自己创建了一个多页面应用，然后手写了webpack相关配置，但是通过npm build打包的时候发现虽然是多个html文件，但是所有的html里面引入的js都是相同的（都引入了所有的js（打包后的）文件），啥问题呢？

源码地址：https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

使用方式：

1. 克隆项目到本地
   git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git
2. 安装依赖模块
   npm install
3. 打包代码
   webpack.base.conf.js

打包后的代码结构如下：

about.html（格式化后代码片段）

home.html（格式化后代码片段）

可以看到这两个html页面都引入了另一个和自己没关系的js文件，怎么回事呢？

项目相关配置，如使用源码，请 忽略 下面内容！！！！

————————————————————————————————————————————————

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

module.exports = {
    mode: 'production',
    entry: {
        // home: path.resolve(__dirname, 'src/pages/home/index.js'),
        // about: path.resolve(__dirname, 'src/pages/about/index.js'),

        home: './src/pages/home/index.js',
        about: './src/pages/about/index.js',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].[chunkhash].js',
    },
    resolve: {
        extensions: ['.js', '.json'],
        // alias: {
        //   'vue$': 'vue/dist/vue.esm.js',
        //   '@': resolve('src'),
        // }
    },
    module: {
        // rules: [
        //     {
        //         test: /\.js$/,
        //         loader: 'babel-loader',
        //         include: [resolve('src')]
        //     }
        // ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'home.html',
            template: 'src/pages/home/html/index.html',
            inject: true,
            // favicon: resolveApp('favicon.ico'),
            minify: {
              removeComments: true,
              collapseWhitespace: true,
            //   removeAttributeQuotes: true,
              // more options:
              // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            // chunksSortMode: 'dependency'
        }),
        new HtmlWebpackPlugin({
            filename: 'about.html',
            template: 'src/pages/about/html/index.html',
            inject: true,
            minify: {
              removeComments: true,
              collapseWhitespace: true,
            },
        }),
    ],
}

build.js

const ora = require('ora')
const webpack = require('webpack')
const webpackConfig = require('./webpack.base.conf.js')
const chalk = require('chalk')
const spinner = ora('building for production...')
spinner.start()

webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
        console.log(chalk.red('  Build failed with errors1111111.\n'))
        process.exit(1)
    }

    console.log(chalk.cyan('  Build complete222222222.\n'))
    console.log(chalk.yellow(
        '  Tip: built files are meant to be served over an HTTP server.\n' +
        '  Opening index.html over file:// won\'t work.\n'
    ))
})

Answer 1

        new HtmlWebpackPlugin({
            chunks:['home'],
            filename: 'home.html',
            template: 'src/pages/home/html/index.html',
            inject: true,
            // favicon: resolveApp('favicon.ico'),
            minify: {
              removeComments: true,
              collapseWhitespace: true,
            //   removeAttributeQuotes: true,
              // more options:
              // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            // chunksSortMode: 'dependency'
        }),

HtmlWebpackPlugin 加上chunks

Answer 2

home: './src/pages/home/index.js',
about: './src/pages/about/index.js'

我感觉是这里的问题,改成数组试试

Answer 3

• webpack不知道入口文件和html文件存在依赖关系
• 每个入口文件都被称为一个chunk
• 从html-webpack-plugin文档的描述来看，默认会将所有chunk都加入到html中，但是允许只加入某些chunk，通过配置chunks选项即可