为什么webpack代码分割不能像预期的那样工作

Why webpack code splitting doesnot work as expected?

本文关键字：工作 webpack 代码 分割 不能 为什么      更新时间：2023-09-26

我希望jquery全局可用，.js/uploader.js仅根据需要在/login进行评估。这就是我所尝试的:

index.js 

require("./css/main.scss")
$ = require("jquery")
require.ensure(["./js/uploader"], function(require) {
    if (window.location.pathname=='/login') {
        var uploader = require("./js/uploader")
    }
});

webpack.config.js: 

module.exports = {
    entry: "./index.js",
    output: {
        path: '../wdksw/static/js',
        publicPath: 'static/js/', 
        filename: "bundle.js", 
    }, 
    module: {
        loaders: [
            { test: /'.css$/, loader: "style!css" }, 
            { test: /'.scss$/, loaders: ["style", "css", "sass"]}, 
        ], 
    }
};
html: 

<script type="text/javascript" src="/static/js/bundle.js"></script>

但是当我在浏览器中请求不是/login时，也请求1.bundle.js，这不是我想要的。那么，我该怎么办呢?我错过什么了吗?

您的require.ensure应该在if语句:

if (window.location.pathname == '/login') {
    require.ensure(["./js/uploader"], function(require) {
        var uploader = require("./js/uploader")
    });
}

现在你的bundle只会在if语句中匹配的条件下才会被添加到你的head中。

相关文章：