AngularJS 1.6 + Webpack Dev Server问题：Module 'app'不可用

嘿，我帮你捋捋这个AngularJS搭Webpack Dev Server时遇到的模块加载问题——你碰到的[$injector:nomod]和[$injector:modulerr]错误，本质就是Webpack没正确打包或者加载你的app模块，下面是几个最容易踩坑的排查方向：

首先得保证你的app模块是正确定义的，比如你的app.js里要写：

// app.js
// 必须带空数组（哪怕没有依赖），这是AngularJS定义模块的语法要求
angular.module('app', []);

然后，Webpack的入口文件（比如index.js）一定要引入这个模块文件，不然Webpack根本不知道要打包它：

// index.js
// 先引入AngularJS（如果是npm安装的）
import angular from 'angular';
// 再引入你的app模块
import './app.js';
// 有控制器、指令的话也要在这里引入，比如 import './controllers/mainCtrl.js';

另外，HTML里的ng-app="app"要和模块名完全一致，大小写敏感！别写成ng-app="App"或者ng-app="application"。

你提到配置没写完，给你一个基础的可运行配置参考，确保Webpack能正确处理AngularJS代码：

// webpack.config.js
const path = require('path');

module.exports = {
  // 入口文件必须指向能加载所有依赖的那个文件（比如index.js）
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    // 静态文件目录要指向你的HTML所在的文件夹
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    hot: true,
  },
  module: {
    rules: [
      // 如果用了ES6+语法，需要babel转译，不然AngularJS可能识别不了
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

还要确保HTML里正确引入了Webpack打包后的bundle.js，比如：

<!-- dist/index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>AngularJS + Webpack Demo</title>
</head>
<body>
  <!-- 这里放你的AngularJS模板，比如 <div ng-controller="MainCtrl">{{message}}</div> -->
  <script src="bundle.js"></script>
</body>
</html>

如果是通过npm安装的AngularJS，不要同时在HTML里用CDN引入，两种引入方式混在一起会导致AngularJS被加载两次，引发模块识别冲突。

打开浏览器控制台的「Network」标签，看看bundle.js是不是成功加载了（返回200状态）。如果是404，那就是Webpack Dev Server的静态目录配置错了，调整devServer.static.directory到正确的文件夹就行。

别小看这个！模块名app的大小写、拼写要完全统一——比如你在app.js里定义的是angular.module('App', [])，但HTML里写的是ng-app="app"，绝对会报错。

如果按上面的步骤排查完还是有问题，可以把你的完整Webpack配置、入口文件和模块代码贴出来，这样能更精准定位问题~

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