3

大規模な AngularJS 1.6 プロジェクト (最大 120 個の JS ファイル) があり、現在は gulp/bower でビルドされています。

yarn と webpack の使用への移行を検討しており、webpack を実装するためだけにプロジェクト ファイルを変更する必要はありません。各 AngularJS コンポーネントの JS ファイルは IIFE にラップされているため、既にグローバル スコープから外れています。

gulp ステップの 1 つはgulp-angular-templatecacheモジュールを使用します。これは、すべての HTML ファイルを収集し、それらを単一の $tmplateCache ローダー モジュールにきちんと圧縮します。

angular.module("ourApp").run(["$templateCache", function ($templateCache) {
  $templateCache.put("/app/components/ourComponent1.html", "<div id=\"component1-html\"> ... </div>\r\n");
  $templateCache.put("/app/components/ourComponent2.html", "<div id=\"component2-html\"> ... </div>\r\n");
  // etc...
});

webpack を使用して他のビルド プロセスのほとんどを解決する方法を見つけることができましたが、これが問題を引き起こしています。

私はngtemplate-loaderパッケージを見てきましたが、次の理由から、これが私たちのニーズに合うとは思いません:

  • 「require("./template.html")」を使用するには、既存の HTML テンプレートをすべて更新する必要があります。
  • これにより、HTML テンプレートごとに個別の webpack モジュールが作成されますが、これは非常に非効率的です。
  • おそらく最も重要なことですが、私はそれを機能させることができませんでした。

私がセットアップした現在の webpack 構成は、単純なデモに基づいており、ベンダー ファイルからプロジェクト ファイルを分割しています。プロジェクト ファイルは、/dist フォルダー内の「app.[hashcode].js」ファイルにまとめられています。

最終的に、コンパイル済みの $templateCache モジュールを、最終的な「app.[hashcode].js」バンドル ファイルの特定のポイントに挿入できるようにしたいと考えています。ただし、現時点では、$templateCache 定義ファイルが別のバンドル ファイルに作成されていることに満足しています。

このビルドステップを完了するために使用できる既存の webpack プラグイン、ローダー、またはプラグイン/ローダーの組み合わせはありますか? これはwebpackでも可能ですか?

これは、デモ プロジェクトのベース ディレクトリ構造です。

/dashboard
   /app
      /assets
         /global
            global.less
         app.less
      /components
         /controllers
            dashboard.controller.js
         /directives
            yep-nope.directive.js
         /messenger
            messenger.directive.js
            messenger.html
         /services
            github-status.service.js
         dashbboard.config.js
         dashboard.module.js
      app.js
      /dist
         app.4f12bb49f144e559bd9b.js
         assets.css
         index.html
         vendor.b0a30c79aa77e0126a5c.js
   index.html
   package.json
   webpack.config.js

これは現在動作中の webpack.config.js ファイルです。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
   context: __dirname,  
   entry: {
      app: path.resolve(__dirname, 'app/app.js'),
      vendor: ['angular','angular-sanitize']
   },
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[chunkhash].js'
   },
   module: {
      rules: [
      {
         test: /\.less$/,
         use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader', 'less-loader']
         })
      },
      {
         test: /\.js$/,
         loader: 'ng-annotate-loader'
      },
      {
         test: /\.html$/,
         exclude: path.resolve(__dirname, 'app/index.html'),
         use: [
            { loader: 'html-loader', options: { minimize: false } }
         ]
      }]
   },
   plugins: [
      new CleanWebpackPlugin(['dist','assets/**/*.css']),
      new HtmlWebpackPlugin({   
         title: 'GitUp',
         template: 'index.html',
         inject: 'body'
      }),
      new webpack.optimize.CommonsChunkPlugin({
         name:"vendor", filename:"[name].[chunkhash].js"
      }),
      new ExtractTextPlugin('assets.css')
   ]
};

これは、webpack の「エントリ」ファイル app/app.js です。

require('./assets/app.less');

require('../node_modules/angular/angular.js');
require('../node_modules/angular-sanitize/angular-sanitize.js');

require('./components/dashboard.module.js');    // Define module
require('./components/dashboard.config.js');    // Setup config

// Load in all components files, except for files already loaded above
var reqCtx = require.context('./components', true, /^(?!.*(?:dashboard\.config|dashboard\.module)).*\.js$/);
reqCtx.keys().forEach(reqCtx);

必要に応じて、サンプル プロジェクト全体を提供できます...

4

1 に答える 1