Сборка Webpack для существующего проекта AngularJS

Я хочу перенести существующую систему сборки на основе Ruby в нашем проекте AngularJS (1.4.X) на 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 в своей точке входа, он копируется в папку сборки, но ни один из других файлов не обрабатывается Webpack, даже если я использую правило babel-loader для .js.

Один из вариантов, который я могу придумать, — использовать все остальные файлы в отдельном файле пакета, используя что-то вроде https://www.npmjs.com/package/webpack-merge-and-include-globally, но я хочу знать, есть ли лучший способ сделать это.

Моя текущая конфигурация веб-пакета выглядит следующим образом.

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


person Ishan Hettiarachchi    schedule 23.12.2020    source источник


Ответы (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 или в случае нескольких угловых модулей и т. д.)

person Petr Averyanov    schedule 24.12.2020