在使用webpack构建angularjs之后如何指向assets和html angular templates文件夹？

Question

我是webpack的新手，我已将webpack配置为工作状态，其中我的index.html文件和budle.js文件来到/ dist文件夹。我知道我也可以构建css文件但是现在我想构建js并运行应用程序。请查看附加的图像，以便更好地理解目录结构和webpack构建配置。

我的疑问是，如果我从dist文件夹运行应用程序，我将失去角度模板和图像路径等的所有路径。我怎样才能克服这种情况？任何帮助表示赞赏。

Answer 1

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

错误的方法： 尝试更改应用中的包含路径。

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

您的webpack配置最终可能如下所示：

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
    })
  ]
};