Webpack plugins and/or strategies for AngularJS

问题

I have an AngularJS 1.7 project currently being built with Gulp, and I'm looking into switching it over to Webpack. After some initial poking around, I'm finding it difficult to find and load all the source files, due to the fact that it's written in a style from before CommonJS and ES6 modules. My hunch is that it's a common (but old) style of Angular, but I'm new to it so I'm not sure.

The Question: Is there a Webpack plugin or tool or strategy for building Angular 1 projects? I'm hoping there's a plugin that is smart enough to pull in all the template files, controllers, directives, services, and so forth without needing to do a lot of configuration.

Specifically, I'm looking for "Use this 1 tool that's exactly what you need", as opposed to "Follow these 20 steps". It's not that I'm lazy, just that I'm confident I can figure out all the required steps, but before I go that route I want to make sure I'm not missing some plugin that does it all for me. And, I don't want to waste anyone else's time writing up the steps.

Reference Info

File Structure

- src
  - components
    - hometile
      -- hometile.css
      -- hometile.drct.js
      -- hometile.tpl.html
  - services
    - capabilities.fct.js

Note the way the templates are put in the same directory as the component controller.

Here's a snippet from the routes file showing how a template is referenced:

app.routes.js

$routeProvider.
    when('/home', {
        templateUrl: 'sections/home/home.tpl.html',
        controller: 'HomeController as home',
        resolve: {
            commonData: function(MyService) {
                return MyService.getCommonData();
            }
        }
    })

Note the use of templateUrl and it's a string path. The actual file is a template, and as far as I can tell, the existing Gulp builder uses a glob to find all the .tpl templates and then sends them to nghtml2js to combine into a single .js

I'm hoping there's something similar that's been written for Webpack that takes a standard Angular 1 project structure and builds all the required outputs.

回答1:

I'm not sure it's really the full answer, but the import-glob npm package made a big difference. I was able to create a single import.js that then imports everything I need.

import.js

import './services/**/*.js';
import './directives/**/*.js';
import './controllers/**/*.js';

I'm also updating it a little with regards to importing the templates:

import template from './sections/home/home.tpl.html';

$routeProvider.
when('/home', {
    templateUrl: template,
    controller: 'HomeController as home',
    resolve: {
        commonData: function(MyService) {
            return MyService.getCommonData();
        }
    }
})

By importing everything this way, Webpack is able to find all the source files.

来源：https://stackoverflow.com/questions/51736025/webpack-plugins-and-or-strategies-for-angularjs

标签

angularjs

Webpack