AngularJs 1.x 项目从 Gulp/Grunt 迁移到 Webpack

Question

我有一个两年前的 AngularJs 1.x 项目，该项目使用 Gulp 进行开发，使用 Grunt 进行生产（不要问我为什么；我也不知道）。

构建过程基本上是：

1. 将所有scss文件编译成一个css文件

2. 将所有JS文件合并为一个JS文件。我们没有使用任何import 机制。每个文件基本上都是 AngularJs 的控制器、组件、服务或过滤器之一。像这样的：

   angular.module("myApp").controller("myCtrl", function() {//...});
   

3. 将所有html模板合并为一个JS文件。每个模板都使用$templateCache 进行硬编码。

4. 将图像和字体等资产移动到构建文件夹中。

5. 将第三方库移动到构建文件夹中。

现在我想为这个项目切换到 webpack。我想逐步使这个项目现代化，但第一步就是使用 webpack 构建它，过程与上述类似。我想尽可能地保持代码库相同。我还不想为所有 JS 文件添加import。有太多了。我还想添加一个 babel-loader。

我对 webpack 有一些基本概念，但我自己从未真正定制过配置。

谁能给我一些指点？比如我需要哪些加载器/插件等？谢谢！

Answer 1

我进行这种过渡的过程是渐进的，我有类似的 Grunt 配置。

这些是我的笔记和步骤，以便过渡到 Webpack 堆栈。

最长的一步是重构代码，使其使用 ES6 导入/导出（是的，我知道你说过这不是你想要的阶段，但避免黑客攻击很重要）。

最后每个文件看起来像这样：

//my-component.js

class MyComponentController { ... }

export const MyComponent = {
    bindings: {...},
    controller: MyComponentController, 
    template: `...`
}

//main.js

import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);

为了不遍历所有文件并更改它们，我们重命名了所有js文件并添加了.not_module.js的后缀。 这些文件是旧的未触及的文件。

我们添加了grunt-webpack 作为旧构建系统的一个步骤（基于 Grunt）。 它通过 Webpack 处理所有新文件（那些没有.not_module.js 后缀的文件）。 该步骤仅生成一个包含已转换的所有文件的包，该文件已添加到 concat 步骤。

一个接一个，每个转换后的文件逐渐从Grunt任务处理转移到Webpack处理。

您可以将webpack.config作为参考。

祝你好运。