1

我希望将 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 插件和/或 AngularJS 策略中的建议更改源代码

4

1 回答 1

0

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

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 的顺序或在多个角度模块等的情况下）

于 2020-12-24T01:06:03.383 回答