Question

有一个大型的AngularJS 1.6项目（约120个JS文件），目前通过gulp / bower构建。

希望迁移到使用纱线＆amp; webpack，我们宁愿不必修改我们的项目文件只是为了实现webpack。我们的每个AngularJS组件JS文件都包含在IIFE中，因此它们已经超出了全局范围。

我们的一个gulp步骤使用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软件包，但由于以下原因，我认为这不能满足我们的需求：

要求我们更新所有现有的HTML模板以使用＆＃39;要求（＆＃34; ./ template.html＆＃34;）＆＃39;
这将为每个HTML模板创建一个单独的webpack模块，这似乎非常低效。
可能最重要的是，我还没有能够让它发挥作用。

我设置的当前webpack配置基于一个简单的演示，并将项目文件从供应商文件中分离出来。我们的项目文件捆绑在一个应用程序中。[hashcode] .js＆＃39;将文件放入/ dist文件夹。

最终，我希望能够将已编译的$ templateCache模块注入我们最终应用程序中的特定点。[hashcode] .js＆＃39;捆绑文件。但是，现在我对创建到单独的bundle文件中的$ 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＆＃39;条目＆＃39;文件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);

如果需要，我可以提供整个样本项目......

Answer 1

这可能是也可能不是您正在寻找的答案，但过去我使用html-loader来允许我需要我的组件模板网址，并且它运行得非常出色：

https://www.npmjs.com/package/html-loader

它只是在您的捆绑脚本中内联模板。

从gulp＆amp ;;迁移AngularJS 1.x项目时如何构建统一的$ templateCache bower to webpack 3

1 个答案: