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不是函数

回答

相关问题