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 によって処理されません。

私が考えることができる1つのオプションは、 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プラグインやAngularJSの戦略で提案されているようにソースコードを変更したくないので、おそらくWebpackは私にとって適切なソリューションではありません

4

1 に答える 1