Question

我已经在我的requirejs项目中安装了webpack，以将依赖项和页面特定的js捆绑为1个文件。但是，目前它只能捆绑jquery，bootstrap和自定义js。 webpack找不到其他依赖项，例如把手，bootstrap-selectpicker

webpack.config.js

const path = require('path');

module.exports = {
   entry: './src/app/page/report/report.js',
   output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
   }
 };

report.js

const $ = require("jquery");
const bootstrap = require("bootstrap");
const Handlebars= require("handlebars"); // this line gives error - Module not found

$(document).on('click', function(){
    alert('Clicked');
});

require_config.js

requirejs.config({
baseUrl: cbp.staticBasePath,

urlArgs: "buildDate=" + buildDate,

//Since Bootstrap is not an AMD module, shim it
shim: {
    "bootstrap": {
        deps: ["jquery"],
        exports: "jQuery.fn.popover"
    },
    "bootstrap-select": {
        deps: ["bootstrap"],
        exports: "bootstrap-select"
    },
    "bootstrap-table": {
        deps: ["jquery", "bootstrap"],
        exports: "bootstrapTable"
    },
},
paths: {

    // Vendor libraries paths
    "jquery-ui": "assets/js/min/jquery-ui.min",
    "modernizr": "assets/js/min/modernizr.min",
    "jquery": "assets/js/min/jquery.min",
    "bootstrap": "assets/js/min/bootstrap.min",
    "handlebars": "assets/js/min/handlebars.min",

    // Components JS file paths
    "bootstrap-table": "app/components/table/bootstrap-table.min",
    "bootstrap-select": "app/components/dropdown/bootstrap-select.min",
}

});

以下是我的项目文件夹结构：-

my-proj
build
src
    app
        components
            selectpicker
                selectpicker.hbs
                selectpicker.js
                selectpicker.less
            calendar
                calendar.hbs
                calendar.js
                calendar.less
            ...
            ...
            ...
        page
            homepage
                homepage.html
                homepage.js
            report
                report.html
                report.js
            ...
            ...
            ...
    assets
        images
        js
            jquery.js
            modernizr.js
            handlebar.js
            require.js
            bootstrap.js
            moment.js
            ...
            ...
            ...
        less
Gruntfile.js
package.json

Answer 1

Webpack对您的require.js配置一无所知。要解析模块，默认情况下会搜索node_modules目录。

您可能应该在Webpack配置中定义resolve部分（假设Webpack配置位于src文件夹中）：

module.exports = {
//...
   resolve: {
      alias: {
          // Vendor libraries paths
          "jquery-ui": "./assets/js/min/jquery-ui.min",
          "modernizr": "./assets/js/min/modernizr.min",
          "jquery": "./assets/js/min/jquery.min",
          "bootstrap": "./assets/js/min/bootstrap.min",
          "handlebars": "./assets/js/min/handlebars.min",

           // Components JS file paths
          "bootstrap-table": "./app/components/table/bootstrap-table.min",
          "bootstrap-select": "./app/components/dropdown/bootstrap-select.min",
      }
   }
};

，或者如果您不希望这些烦人的重复项，请尝试添加（但我认为您应该使用稍微不同的模块路径才能使其正常工作，例如：./assets/js/min/bootstrap/bootstrap.js）：
```
//...
resolve: {
    modules: [path.resolve(__dirname, './assets/js/min')]
}
```

PS 抱歉，我不知道您的所有项目体系结构，但是捆绑requirejs（和systemjs）项目的常见解决方案是将其与gulp或grunt捆绑在一起为requirejs创建特殊捆绑软件的制造商，仅提供所有AMD模块均已加载的情况。我认为webpack将会创建无法与requirejs一起使用的包。

Webpack无法找到某些模块

1 个答案: