Question

我有一个使用Backbone.js和Marionette开发的大型应用程序和Requirejs.We正在使用Grunt进行构建。我需要将Requirejs迁移到Webpack，因为我们经常看到模块加载超时。我觉得Webpack的多入口点方法比使用Requirejs将单页转换为多页更好。

总的来说，我们有大约400个js文件和250个html [部分]文件。项目结构是

app
    |--modules
    |     |-- module-A
    |        |- model
    |        |- collection         
    |        |- view
    |        |- module_utils
    |     |-- module-B
    |
    |---templates  
      |-- module-A
         |- view-1.html
         |- view-2.html         
      |-- module-B

requirejs配置文件如下所示：

require.config({
    paths: {
        templates: "./../templates",
        jquery: "/static/lib/jquery/jquery.min",
        jquerymigrate: "/static/lib/jquery/jquery-migrate.min",
        jqueryui: "/static/lib/jqueryui/ui/minified/jquery-ui.custom.min",
        bootstrap: "/static/lib/bootstrap-3.1.1/dist/js/bootstrap",
        ...

    },

    shim: {
        'jquerymigrate': ['jquery'],
        'jquerybackstretch': ['jquery'],
        'jqueryuniform': ['jquery'],
        'jqueryui': ['jquery','jquerymigrate'],
        'bootstrap': ['jquery'],
        ....
        }
    }
})

这里/静态指向我们在nginx配置中指定的位置，用于提供css，js等内容。

要将其转换为webpack配置，我首先使用webpack配置文件创建单个文件。而不是从多个条目开始。

var webpack = require("webpack");
var path = require("path");

module.exports = {
    entry: "./app.js",  
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    resolve: {
        alias: {
            "templates": "./../templates",
            "jquery": "../../lib/jquery/jquery.min",
            "jquerymigrate": "./..//lib/jquery/jquery-migrate.min",
            "jqueryui": "../../lib/jqueryui/ui/minified/jquery-ui.custom.min",
            "bootstrap": "../../lib/bootstrap-3.1.1/dist/js/bootstrap",
            "moment": "../../lib/moment/min/moment.min",
            ....

        } ,
        extensions: ['', '.js'],
        modulesDirectories: [ __dirname],
        root: [path.resolve('./../app/modules/')]

    }
}

function escapeRegExpString(str) { return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); }
function pathToRegExp(p) { return new RegExp("^" + escapeRegExpString(p)); }

在我基于requirejs的应用程序中，模块被指定为

define([
  'underscore', 
  'backbone',
  'utils',
  'core/constants',
  'text!templates/common/popup-template.html'
], function(_, Backbone, Utils, Constants, template) {

...
....
}

当我运行webpack时，我收到错误＆＃34;无法解析模块模板/ common / popup-template.html＆＃34;。但是这个html是Backbone视图用来创建视图的部分html /模板。

在其中一个网站中，我看到我需要html-loader插件。然后在webpack config＆＃34; text＆＃34;：＆＃34; html＆＃34;中设置别名。并改变这样的行＆＃39; text！templates / common / popup-template.html＆＃39;到＆＃39; [确切路径] /templates/common/popup-template.html'。这意味着我需要更改大量代码。

这种迁移有更好的方法吗？

感谢普拉迪普

Answer 1

你需要text-loader插件，而不是“html”。您也不需要在config中编写任何内容。依赖的前缀text!将附加它。

试试吧 npm install text-loader --save-dev

将Requirejs和基于Backbone的应用程序迁移到WebPack

1 个答案: