为现有 AngularJS 项目构建 Webpack答案

【问题标题】：Webpack build for exisitng AngularJS project为现有 AngularJS 项目构建 Webpack
【发布时间】：2020-12-23 07:08:23
【问题描述】：

我希望将 AngularJS(1.4.X) 项目中现有的基于 Ruby 的构建系统迁移到 Webpack。项目代码没有使用 JS 模块并且使用老式的 Angular 代码模式我不确定 Webpack 将如何找到项目中的所有控制器和工厂文件。

文件夹结构是这样的，

-app
   - assets
       - javascripts
           - ctrl
               - controllerA.js
               - controllerB.js
           -services
               -serviceA.js
               -serviceB.js
           - angular.min.js
           - angular-route.js
           - main.js

我在入口点使用 main.js，它会被复制到构建文件夹中，但即使我使用 babel-loader 到 .js 规则，Webpack 也不会处理其他文件。

我能想到的一个选择是使用类似的东西将所有其他文件放入一个单独的捆绑文件中 https://www.npmjs.com/package/webpack-merge-and-include-globally，但我想知道是否有更好的方法。

我当前的 webpack 配置如下。

module.exports = {
    context: __dirname +'/app',
    entry: {
        'app-portal': [
            '/assets/javascripts/main.js',
            '/assets/javascripts/angular.min.js',
            '/assets/stylesheets/portal/style.css',
            '/assets/stylesheets/portal/navbar.css',
            '/assets/stylesheets/portal/animation.css',
            '/assets/stylesheets/portal/bootstrap.min.css',
            '/assets/stylesheets/portal/bootstrap-notify.css',
            '/assets/stylesheets/portal/fontello.css',
        ]
    },
    output: {
        path: __dirname + "/dist/assets",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    { 
                        loader:'css-loader', 
                        options: { 
                            sourceMap: true,
                            url: false,
                        },
                    },
                ],
            }, 
plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './views/portal/index.html',
      filename: '../index.html',
    }),
    new MiniCssExtractPlugin({
        filename: './[name].css',
        linkType: false,
        ignoreOrder: false, 
    }),
    new CopyPlugin({
        patterns: [
            {
                from: './views/portal/**/*.*',
                to: "../[name].[ext]",
                globOptions: {
                    ignore: [
                        '**/index.*',
                    ],
                },  
            },
            {
                from: './assets/fonts/*.*',
                to: "./[name].[ext]",
            },
            {
                from: './assets/images/portal/*.*',
                to: "./[name].[ext]",
            },
            {
                from: './assets/theme/*.*',
                to: "./[name].[ext]",
            }               
        ]
    }), 
],

Webpack 可能不是适合我的解决方案，因为我不想按照Webpack plugins and/or strategies for AngularJS 中的建议更改源代码

【问题讨论】：

标签： angularjs webpack webpack-5

【解决方案1】：

你可以尝试这样的事情（我们用它来运行测试）：

bundle.js:

        const jsConext= require.context('.', true, /\.js/);
        ng1Context.keys().forEach(ng1Context);
        const cssConext= require.context('.', true, /\.css/);
        ng1Context.keys().forEach(ng1Context);
...
 entry: { 'app-portal': 'bundle.js' }

这应该可以正常工作（您可能需要修复 css 的顺序或多个角度模块等）

【讨论】：