webpack打包如何让公共库先加载

发布于 2022-09-06 06:37:34 字数 3554 浏览 26 评论 0

1.在使用webpack打包过程中遇到一个问题,在将逻辑代码js与公共库js分开打包的过程中,webpack将公共库js后于逻辑js加载了,导致报错。有什么办法让公共库js先加载吗?

2.目录结构
图片描述

webpack.config.js


var webpack = require("webpack");

var Html = require("html-webpack-plugin");

module.exports = {
    entry: {
        index: __dirname + "/src/js/index.js",
        common: [
            __dirname + "/lib/jquery.js"
        ]
    },
    output: {
        path: __dirname + "/dist",
        filename: "js/[name].js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    plugins: [
        new Html({
            template: __dirname + "/src/index.html",
            inject: true
        }),

        new Html({
            template: __dirname + "/src/html/one.html",
            filename: "html/one.html",
            inject: false
        }),

        new Html({
            template: __dirname + "/src/html/two.html",
            filename: "html/two.html",
            inject: false
        }),

        new Html({
            template: __dirname + "/src/html/three.html",
            filename: "html/three.html",
            inject: false
        }),

        new Html({
            template: __dirname + "/src/html/four.html",
            filename: "html/four.html",
            inject: false
        })
    ]
}

index.js

require("../css/index.css");

var ojContent = $(".tabcontent-box");

loadHtml("one");

function loadHtml (modName) {
    var sUrl = "../html/" + modName + ".html";
    var jsPath = "./" + modName;
    $.ajax({
        url: sUrl,
        success: function (res) {
            ojContent.html(res);
            loadJs(jsPath);
        }
    })
}

function loadJs(jsPath) {
    var currentMod;

    if ( jsPath == "./one") {
        currentMod = require("./one.js");
        currentMod.init();
    }
}

src中的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单页应用</title>
</head>
<body>
    <div class="header">
        <div class="content"></div>
    </div>
    <div class="main content">
        <ul class="tabbtn-box">
            <li>页面1</li>
            <li>页面1</li>
            <li>页面1</li>
            <li>页面1</li>
        </ul>
        <div class="tabcontent-box">首页</div>
    </div>
</body>
</html>

dist中的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单页应用</title>
</head>
<body>
    <div class="header">
        <div class="content"></div>
    </div>
    <div class="main content">
        <ul class="tabbtn-box">
            <li>页面1</li>
            <li>页面1</li>
            <li>页面1</li>
            <li>页面1</li>
        </ul>
        <div class="tabcontent-box">首页</div>
    </div>
<script type="text/javascript" src="js/index.js"></script><script type="text/javascript" src="js/common.js"></script></body>
</html>

就是这个common.js加载跑到index.js后面去了。有什么办法控制一下他们的加载顺序吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

岁月蹉跎了容颜 2022-09-13 06:37:34

commonjs用commonchunkplugin打

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文