用于生产的Angular2构建应用程序不包括所有文件

时间:2016-11-25 12:17:45

标签: angular build npm webpack

我正在尝试构建Angular2应用程序,对其进行优化,而不是包含所有文件。

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: '../../html/app.html',
    styleUrls: ['../../css/components/app.css'] 
})

export class AppComponent {}

app.html

<div class="logo">
<img src="img/image.png" alt=""></a>
</div>

<div class="video-container">
<video width="100%" controls>
<source src="video/video.mp4" type="video/mp4">
</video>
</div>

跑完后:

npm run build

我的Angular2应用程序在/dist目录

中编译
/assets
app.css
app.css.map
app.js
app.js.map
index.html
polyfils.js
polyfils.js.map
vendor.js
vendor.js.map

正如我们在模板文件中看到的那样,有两个来源:“img / image.png”和“video / video.mp4”。构建之后,我的image.png文件位于/assets目录中,但video.mp4文件不在。我需要手动将video/video.mp4放在/dist目录中,因为在运行$ lite-server之后我没有遇到404错误“找不到文件”。

我还可以看到app.js.map文件中的差异:

<img src=\\\"\" + __webpack_require__(107)
...
<source src=\\\"video/video.mp4

我的问题是,如何强制构建模块包含所有类型的文件?可能吗?我认为我的webpack配置可能有问题。

package.json 片段:

{...
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080 --display-error-details",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  }
...
}

webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  htmlLoader: {
    minimize: false // workaround for ng2
  },

  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    })
  ]
});

0 个答案:

没有答案