从RequireJS迁移至Webpack遇报错：无法解析'app'模块

你遇到的这个问题，核心是Webpack和RequireJS在模块解析逻辑上的差异：在RequireJS里你可以直接用'app'这种裸模块名引用项目内的自定义脚本，但Webpack默认只会去node_modules目录查找这类裸模块名，不会自动识别你项目里的本地文件，所以需要调整Webpack的配置来告诉它'app'对应哪个文件。

这里有两种可行的解决方案：

方案一：配置resolve.alias（推荐） #

直接在Webpack配置的resolve.alias里给'app'指定实际的文件路径，这样Webpack就能精准定位到你的app.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  resolve: {
    modules: [ "node_modules", path.resolve(__dirname, 'node_modules') ],
    alias: {
      'handlebars': '../../node_modules/handlebars/dist/handlebars',
      'app': path.resolve(__dirname, './app/scripts/app.js') // 新增这一行
    },
    extensions: ['.js']
  },
  // ...其他配置
};

方案二：扩展resolve.modules搜索目录 #

把你的脚本目录加入Webpack的模块搜索路径，这样Webpack会在这个目录里查找名为app的文件（也就是app.js）：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  resolve: {
    modules: [ 
      "node_modules", 
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, './app/scripts') // 新增这一行
    ],
    alias: {
      'handlebars': '../../node_modules/handlebars/dist/handlebars'
    },
    extensions: ['.js']
  },
  // ...其他配置
};

这种方式适合你的项目里有很多自定义模块都在app/scripts目录下，不用逐个添加别名。

另外补充个小建议：你当前的entry里同时把app.js和public-views.js作为入口，其实Webpack会自动分析依赖树，只把app.js作为入口就足够了——因为public-views.js依赖app.js，Webpack会自动把它打包进去，这样能避免重复打包的问题。

内容的提问来源于stack exchange，提问作者sleepy_daze