Webpack ProvidePlugin/vendor bundle：angular.module不是函數

我有一個Angular應用程序，目前通過Webpack構建到一個大包中，包含一個文件中的所有依賴項和應用程序代碼。我試圖將代碼拆分爲兩個捆綁包，一個捆綁了所有的依賴關係，另一個捆綁了我所有的應用程序代碼。Webpack ProvidePlugin/vendor bundle：angular.module不是函數

我有以下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')] 
    } 
};

這產生兩束，一個僅與依賴關係和一個僅具有應用程序代碼。但是，當我嘗試加載應用程序時，我得到：Uncaught TypeError: angular.module is not a function，它可以追溯到內的vendor.bundle.js。換句話說，angular不能被vendor.bundle.js文件中需要加載的其他模塊訪問。但是，我不確定如何使這些依賴關係彼此可見。

來源

2016-08-18 NeuroXc

以下應將所有不在src文件夾中的腳本移動到供應商塊。

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, 
     }),

來源

2016-11-29 05:31:39 fernando

要回答在原崗位的標題問題，角1沒有很好地與無的WebPack墊片工作（見https://github.com/webpack/webpack/issues/2049）。試試這個的WebPack裝載機配置：

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', 
    }), 
],

這應該初始化角度對象，而不是正確的它設置爲空對象的默認操作（不具有屬性命名模塊）。

來源

2017-01-10 08:32:22 Motin

Webpack ProvidePlugin/vendor bundle：angular.module不是函數

回答

相關問題