wants to contact webpack about how to use it, so he abandons any scaffolding tools, creates a multi-page application, and then handwrites the webpack related configuration. But through npm build packaging, it is found that although there are multiple html files, all js introduced in html are the same (all js (

Source address: https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

usage:

1. Clone the project to local
   git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git
2. install dependent modules
   npm install
3. Packaging Code
   webpack.base.conf.js

the structure of the packaged code is as follows:

about.html

home.html

you can see that both html pages introduce another js file that has nothing to do with you. What"s going on?

Project-related configurations, such as using source code, please ignore the following!

-

"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-sharpoptions-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"
    ))
})