Pakiet pakowania pakietu WebPaper/dostawca: angular.module nie jest funkcją

Question

Mam aplikację Angular, która jest obecnie budowana za pomocą pakietu Webpack w jednym dużym pakiecie, zawierającym wszystkie zależności i kod aplikacji w jednym pliku. Próbuję podzielić kod na dwa pakiety, jeden pakiet z wszystkimi zależnościami i inny z całym kodem aplikacji.

Mam następujące webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 

var definePlugin = new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: `"${process.env.NODE_ENV}"` 
    } 
}); 

var SRC = path.resolve(__dirname, 'src/main/client'); 
var APP = path.resolve(SRC, 'app/index.js'); 
var DEST = path.resolve(__dirname, 'target/webapp/dist'); 

module.exports = { 
    entry: { 
     vendor: [ 
      'angular', 
      'angular-animate', 
      'moment', 
      'angular-moment', 
      'angular-translate', 
      'angular-ui-bootstrap', 
      'angular-ui-router', 
      'lodash' 
     ], 
     app: APP 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      _: 'lodash', 
      angular: 'angular', 
      angularMoment: 'angular-moment', 
      angularTranslate: 'angular-translate', 
      moment: 'moment', 
      ngAnimate: 'angular-animate', 
      uibootstrap: 'angular-ui-bootstrap', 
      uirouter: 'angular-ui-router' 
     }), 
     new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), 
     definePlugin 
    ], 
    output: { 
     path: DEST, 
     filename: 'bundle.js', 
     publicPath: '/', 
     hash: true 
    }, 
    module: { 
     preLoaders: [], 
     loaders: [ 
      { test: /\.html$/, loaders: ['html'] }, 
      { test: /\.css$/, loaders: ['style', 'css'] }, 
      { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loaders: ['ng-annotate', 'babel?presets[]=es2015', 'eslint'] 
      }, 
      { 
       test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: 'file' 
      } 
     ] 
    }, 
    sassLoader: { 
     includePaths: [path.resolve(__dirname, './node_modules')] 
    } 
}; 

To daje dwie wiązki, jeden tylko z zależnościami i jeden tylko z kodu aplikacji. Jednak, gdy próbuję załadować aplikację, otrzymuję: Uncaught TypeError: angular.module is not a function, która jest śledzona wstecz do angular-moment.js w ramach vendor.bundle.js. Innymi słowy, angular nie jest dostępny dla innych modułów, które muszą być załadowane do pliku vendor.bundle.js. Jednak nie jestem pewien, jak sprawić, aby te zależności były dla siebie widoczne.

Answer 1

Poniżej należy przenieść wszystkie skrypty spoza folderu src do fragmentu dostawcy.

const path = require('path'); 
const projectRoot = path.resolve('./'); 

     new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: (module) => module.resource && module.resource.indexOf(path.join(projectRoot, 'src')) === -1, 
     }), 

Answer 2

Aby odpowiedzieć na pytanie w nagłówku oryginalnego postu, kątowy 1 nie działa ładnie z WebPacka bez podkładki (patrz https://github.com/webpack/webpack/issues/2049). Spróbuj tego WebPACK ładowarka config:

module: { 
    loaders: [ 
     /* 
     * Necessary to be able to use angular 1 with webpack as explained in https://github.com/webpack/webpack/issues/2049 
     */ 
     { 
      test: require.resolve('angular'), 
      loader: 'exports?window.angular' 
     }, 
    ] 
}, 
plugins: [ 
    new webpack.ProvidePlugin({ 
     'angular': 'angular', 
    }), 
], 

ten powinien zainicjować kątową obiektu właściwie zamiast domyślnego działania ustawienie go do pustego obiektu (które nie mają właściwość o nazwie modułu).