Webpack无法解析其他库中的“角”模块

Question

我使用Webpack 3.1.0作为我的应用程序，它是用角1编写的。这是我的webpack.config.js：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: './frontend/expert/app/expert.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/frontend/expert/dist'
    },
    module: {
        rules: [
            { 
                test: /\.css$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                }) 
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath: 'img/'
                    }
                }]
            },
            {
                test: /\.(woff|woff2|ttf|eot)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]'
                    }
                }]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('main.css'),
        new HtmlWebpackPlugin({
            template: './frontend/expert/app/index.html' 
        })
    ],
    resolve: {
        alias: {
            angular: './frontend/expert/bower_components/angular/angular.min.js'
        }
    }
};

module.exports = config;

我的expert.js (从我选择所需库的地方)如下：

require('../bower_components/jquery/dist/jquery.min.js');
require('../bower_components/angular/angular.min.js');
require('../bower_components/angular-ui-router/release/angular-ui-router.min.js');
require('../bower_components/angular-animate/angular-animate.min.js');
require('../bower_components/angular-bootstrap/ui-bootstrap.min.js');
require('../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js');
require('../bower_components/bootstrap/dist/js/bootstrap.min.js');
require('../bower_components/angular-fullscreen/src/angular-fullscreen.js');
require('../bower_components/angular-fontawesome/dist/angular-fontawesome.js');
require('../bower_components/trumbowyg/dist/trumbowyg.min.js');
require('../bower_components/trumbowyg-ng/dist/trumbowyg-ng.js');
require('../bower_components/medium-editor/dist/js/medium-editor.min.js');
require('../bower_components/handlebars/handlebars.runtime.min.js');
window.$ = window.jQuery = jquery;

有些模块无法解析“角”，比如“角全屏”，我得到了这个错误：

模块未找到:错误:无法解析'/Users/Bhavesh/myapp/frontend/expert/bower_components/angular-fullscreen/src‘中的“角”

我试图通过在webpack.config.js中添加别名来解决这个问题，但是它没有起作用。

我的应用程序是一个多页应用程序，有两个不同的角度应用程序，其结构如下：

-bin
-models
-routes
-server
-node_modules
-webpack.config.js
-frontend
  --expert
    --bower_components
    --app
    --expert.js
  --user
    --bower_components
    --app

有人能帮我解决这个问题吗。

Answer 1

我使用暴露装载机来解决这个问题：

    {
      test: require.resolve('angular'),
      use: [
        'expose-loader?angular'
      ]
    };

更多细节，以及如何处理其他第三方库可以在这里找到。