无需ES6重构：AngularJS项目从Grunt迁移至Webpack可行性咨询

嘿，很高兴能帮你解决这两个问题！我之前处理过不少遗留项目迁移的情况，正好可以给你一些实用的建议：

一、Webpack如何打包CommonJS模块（module.exports） #

其实Webpack原生就支持CommonJS规范，完全不需要额外配置就能处理module.exports和require()语法，这也是它能兼容旧项目的一大优势。举个简单的例子：

1. 假设你有一个导出模块 utils.js：

// utils.js
module.exports = {
  add: function(a, b) {
    return a + b;
  }
};

2. 在入口文件 app.js 里引入这个模块：

// app.js
const utils = require('./utils.js');
console.log(utils.add(2, 3)); // 输出5

3. 然后创建最基础的 webpack.config.js：

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

4. 最后运行打包命令（确保已经安装了webpack和webpack-cli）：

npx webpack --mode development

这样Webpack就会自动分析所有CommonJS依赖，把它们打包到dist/bundle.js里，直接在HTML里引入这个文件就能运行了。

二、遗留AngularJS项目从Grunt迁移到Webpack（无需升级ES6） #

完全可以不用升级到ES6就能完成迁移！Webpack对CommonJS的良好支持正好适配你的项目情况，我给你梳理一下具体步骤：

1. 初始化Webpack环境 #

首先在项目根目录安装必要的依赖：

npm install webpack webpack-cli --save-dev
# 如果需要处理HTML、CSS等资源，再安装对应的插件和loader
npm install html-webpack-plugin css-loader style-loader --save-dev

2. 配置Webpack核心参数 #

创建webpack.config.js，把原来Grunt的打包逻辑映射过来：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 项目入口文件，就是你原来Grunt打包的主入口
  entry: './src/app.js',
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist',
    clean: true // 每次打包清空dist目录
  },
  module: {
    rules: [
      // 处理CSS文件，适配原来项目里的样式引入
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 如果有AngularJS的HTML模板，可以用html-loader处理
      {
        test: /\.html$/,
        use: 'html-loader'
      }
    ]
  },
  plugins: [
    // 自动生成HTML文件并引入打包后的JS
    new HtmlWebpackPlugin({
      template: './src/index.html' // 原来的入口HTML文件
    })
  ],
  mode: 'development' // 开发模式，生产环境换成production会自动压缩
};

3. 保留原有CommonJS代码不动 #

你项目里用module.exports导出的AngularJS组件、服务等，完全不需要修改。比如原来的一个服务：

// src/services/userService.js
module.exports = function($http) {
  return {
    getUser: function(id) {
      return $http.get('/api/users/' + id);
    }
  };
};

在入口文件里直接用require引入，然后注册到AngularJS模块里：

// src/app.js
const angular = require('angular');
const userService = require('./services/userService.js');

angular.module('myApp', [])
  .service('userService', userService);

4. 替换Grunt的其他任务 #

• 热重载/自动刷新：原来Grunt的watch任务可以用webpack-dev-server替代，安装后运行npx webpack serve就能实现实时预览。
• 代码压缩：生产环境打包时加上--mode production，Webpack会自动压缩JS、优化代码，不用额外配置压缩插件。
• 第三方依赖处理：如果项目里用了jQuery、AngularJS等第三方库，可以直接用require引入，或者通过externals配置让Webpack不打包它们，保持原来的CDN引入方式。

5. 测试迁移效果 #

运行打包命令：

npx webpack --mode production

然后打开dist目录下的index.html，测试所有功能是否正常，确认没问题后就可以逐步替换掉Grunt的任务了。

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