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

Question

我正在为我的应用程序使用 Webpack 3.1.0，它是用 Angular 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;

有些模块无法解析“angular”，例如“angular-fullscreen”，我收到此错误：

找不到模块：错误：无法解析“/Users/Bhavesh/myapp/frontend/expert/bower_components/angular-fullscreen/src”中的“angular”

我尝试通过在 webpack.config.js 中为“angular”添加别名来解决此问题，但它不起作用。

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

-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'
      ]
    };

更多细节以及如何处理其他第三方库can be found here。