MEAN项目中的以下技术存在问题-angular 7,webpack,nodejs,heroku。
我使用webpack设置了项目以进行开发和生产构建,但是当我将其推送到heroku时,似乎dist文件夹在部署后从未改变。
我尝试更改html&css代码,但浏览网站时未应用所有更改。 我检查了heroku构建并看到“ npm run build”成功。
附加了一些代码: package.json:
{
"name": "Bla Bla",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev": "node server.js",
"start:dev": "npm run dev & webpack-dev-server --port=4200",
"start": "npm run dev",
"build": "cross-env NODE_ENV=production --config webpack.config.js",
"heroku-prebuild": "rm -rf dist"
},
"heroku-run-build-script": true,
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.5",
"@angular/animations": "7.2.0",
"@angular/cdk": "7.3.5",
"@angular/common": "7.2.0",
"@angular/compiler": "7.2.0",
"@angular/compiler-cli": "7.2.10",
"@angular/core": "7.2.0",
"@angular/forms": "7.2.0",
"@angular/http": "7.2.0",
"@angular/material": "7.2.0",
"@angular/platform-browser": "7.2.0",
"@angular/platform-browser-dynamic": "7.2.0",
"@angular/router": "7.2.0",
"@nicky-lenaers/ngx-scroll-to": "0.6.1",
"buffer": "5.2.1",
"classlist.js": "1.1.20150312",
"core-js": "2.5.4",
"express": "4.16.4",
"lodash": "4.17.11",
"moment": "2.24.0",
"ng-circle-progress": "1.0.0",
"ngx-device-detector": "1.3.5",
"path": "0.12.7",
"rxjs": "6.3.3",
"rxjs-compat": "6.4.0",
"tslib": "1.9.0",
"zone.js": "0.9.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.13.6",
"@angular/cli": "7.3.6",
"@angular/language-service": "7.2.0",
"@ngtools/webpack": "7.3.6",
"@types/googlemaps": "3.30.19",
"@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.123",
"@types/node": "8.9.4",
"@types/uuid": "3.4.4",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "5.2.1",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"clean-css-loader": "1.1.0",
"clean-webpack-plugin": "2.0.1",
"codelyzer": "4.5.0",
"cross-env": "5.2.0",
"css-loader": "2.1.1",
"cssnano": "4.1.10",
"enhanced-resolve": "3.4.1",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.0.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "4.11.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"protractor": "5.4.0",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"stylus-loader": "3.0.2",
"to-string-loader": "1.1.5",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.2.2",
"uglifyjs-webpack-plugin": "2.1.2",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-cli": "3.3.0",
"webpack-dev-server": "3.2.1",
"webpack-merge": "4.2.1"
},
"engines": {
"node": "10.15.3",
"npm": "6.4.1"
}
}
webpack.config.js:
const environment = (process.env.NODE_ENV || 'development').trim();
if (environment === 'development') {
module.exports = require('./config/webpack.config.dev');
} else {
module.exports = require('./config/webpack.config.prod');
}
比其对webpack.config.prod的调用:
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
const path = require('path');
const ngw = require('@ngtools/webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
const helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
mode: 'production',
devtool: 'source-map',
output: {
path: path.join(process.cwd(), "dist"),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js',
},
optimization: {
noEmitOnErrors: true,
splitChunks: {
chunks: 'all'
},
runtimeChunk: 'single',
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: false
})
]
},
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
},
]
},
plugins: [
new ngw.AngularCompilerPlugin({
tsConfigPath: helpers.root('tsconfig.json'),
entryModule: helpers.root('src', 'app', 'app.module#AppModule'),
skipCodeGeneration: false,
sourceMap: true,
})
]
});
我希望当静态文件发生更改时,部署将更改网站内容。