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

Posted 2023-02-22

【中文标题】Webpack ProvidePlugin/vendor bundle：angular.module 不是函数

【英文标题】：Webpack ProvidePlugin/vendor bundle: angular.module is not a function

【发布时间】：2016-12-25 16:36:24

【问题描述】：

我有一个 Angular 应用程序，它目前通过 Webpack 构建成一个大包，在一个文件中包含所有依赖项和应用程序代码。我试图将代码分成两个包，一个包包含我的所有依赖项，另一个包包含我的所有应用程序代码。

我有以下 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-moment.js。换句话说，angular 不能被其他需要加载到vendor.bundle.js 文件中的模块访问。但是，我不确定如何使这些依赖项彼此可见。

【参考方案1】：

要回答原帖标题中的问题，Angular 1 在没有 shim 的情况下不能很好地与 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',
    ),
],

这应该正确初始化 angular 对象，而不是将其设置为空对象（没有名为 module 的属性）的默认操作。

【参考方案2】：

以下应该将所有不在 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,
      ),