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

Question

我有一个已有两年历史的 AngularJs 1.x 项目，它是使用 Gulp 构建的用于开发，使用 Grunt 用于生产(不要问我为什么；我也不知道)。

构建过程基本上是:

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

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

   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 后缀的文件)。该步骤仅生成一个包，其中包含已转换的所有文件，即我们已添加到连接步骤的文件。

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

您可以引用webpack.config .

祝你好运。