如何在用WebPack构建angularjs后指向资产和html angular templates文件夹？

Question

我的疑问是，如果我从dist文件夹运行应用程序，我会丢失所有的角模板路径和图像路径等，我如何克服这种情况？任何帮助都很感激。

Answer 1

首先，您需要知道目标是在构建后在./dist/内有一个完全可运行的独立应用程序。运行应用程序所需的所有源文件都应该放在那里。这样，您就可以根据./dist/目录通过copy/upload/或-what-ever分发应用程序。您项目中的所有其他目录都只是为了开发。这些将不是您的分发包的一部分。

错误的方法：试图更改应用程序中的include路径。

您需要将sourcefiles（静态文件）复制或连接到分发文件夹中。我真的不知道为什么视图/模板不存储在./app/assets/中，而不存储在./app/views/中，因为./app/views/应该是存储视图的正确路径。那么，您需要复制您的静态源文件。例如：您可以使用copy-webpack-plugin。

var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'app'),
  devServer: {
    // This is required for older versions of webpack-dev-server
    // if you use absolute 'to' paths. The path should be an
    // absolute path to your build destination.
    outputPath: path.join(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'assets/**/*',
        to: 'assets/'
      },
      {
        from: 'views/**/*',
        to: 'views/'
      },
    ], {
      ignore: [
      ],

      // By default, we only copy modified files during
      // a watch or webpack-dev-server build. Setting this
      // to `true` copies all files.
      copyUnmodified: true
    })
  ]
};