webpack打包如何讓公共庫先加載

1.在使用webpack打包過程中遇到一個問題，在將邏輯代碼js與公共庫js分開打包的過程中，webpack將公共庫js后于邏輯js加載了，導(dǎo)致報(bào)錯。有什么辦法讓公共庫js先加載嗎？

2.目錄結(jié)構(gòu)
圖片描述

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>單頁應(yīng)用</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>單頁應(yīng)用</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后面去了。有什么辦法控制一下他們的加載順序嗎？

回答

編輯回答