我正在尝试构建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
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)
}
})
]
});