webpack4多页面应用--多个页面需要同一份代码，如何处理

最新推荐文章于 2024-09-23 11:10:13 发布

离子守恒

最新推荐文章于 2024-09-23 11:10:13 发布

阅读量239

点赞数

分类专栏：项目经验

本文链接：https://blog.csdn.net/qq_24243695/article/details/105292412

版权

项目经验专栏收录该内容

13 篇文章 0 订阅

订阅专栏

问题：多页面应用中每一个HTML页面需要引入同一份js文件，如何利用webpack处理这一份js文件。

解决：

1.首先将这份代码放到一个js文件中，然后将这份文件单独配置一个出口文件。
import $ from 'jquery';
import './../style/header.scss';
function createHeader() {
    return `<header>
            <div class="intro">
                <div class="logo"></div>
                <div class="kouhao">线上健康</div>
            </div>
            <nav class="nav">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="./index.html">首页</a>
                    </li>
                    <li class="nav__item">
                        <a href="./life.html">生活搭配</a>
                    </li>
                    <li class="nav__item">
                        <a href="./rumour.html">谣言止步</a>
                    </li>
                    <li class="nav__item">
                        <a href="./diet.html">个人健康</a>
                        </li>
                    <li class="nav__item">
                        <a href="./help.html">帮助</a>
                    </li>
                    <li class="nav__item">
                        <a href="./login.html">注册 / 登录</a>
                        </li>
                </ul>
            </nav>
        </header>`
}

const headerStr = createHeader()
$('body').prepend(headerStr)

2.配置出口
entry: {
    createHeader: './src/js/createHeader.js'
}

3.通过HTMLWeapackPlugin的chunk引入
new HTMLWebpackPlugin({
    template: './page/help/help.html',
    filename: 'page/help.html',
    chunks: ['help','createHeader'],
}),