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

Question

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

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

Answer 1

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

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

您需要将源文件（静态文件）复制或连接到分发文件夹。我真的不知道为什么你的意见/模板没有存储在./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 
    }) 
    ] 
};