Webpack 无法解析其他库中的模块"角度"

Question

我正在使用webpack 3.1.0作为我的应用程序编写的应用程序。这是我的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;

我的专家。

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;

有一个无法解析"角"的模块，例如" Angular-Fullscreen"，我遇到了此错误：

找不到模块：错误：无法在'/users/bhavesh/bhavesh/myapp/frontend/expert/bower_components/anguarl-fullscreen/src'

中解析'angular'

我尝试通过将别名放在webpack.config.js中来解决此问题，但它不起作用。

我的应用程序是一个包含2个不同角应用的多页面它的结构是这样：

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

任何人都可以帮助我解决这个问题。

Answer 1

我使用expose-loader解决此问题：

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

可以在此处找到更多详细信息以及如何处理其他第三方库。