angular - 开发 webpack 构建花费大量时间
问题描述
我正在开发一个 Angular 4 项目(通过 JHipster 创建),这需要花费大量时间在启动时构建项目以及在对任何文件进行微小更改后重新构建。
构建 appox 至少需要 10 分钟。4500 个子模块。
const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');
const ENV = 'development';
module.exports = webpackMerge(commonConfig({
env: ENV
}), {
devtool: 'eval-source-map',
devServer: {
contentBase: './target/www',
proxy: [{
context: [
'/uaa',
/* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
'/api',
'/management',
'/swagger-resources',
'/v2/api-docs',
'/h2-console',
'/auth'
],
target: 'http://127.0.0.1:8080',
secure: false
}],
watchOptions: {
ignored: /node_modules/
}
},
entry: {
polyfills: './src/main/webapp/app/polyfills',
global: './src/main/webapp/content/scss/global.scss',
main: './src/main/webapp/app/app.main'
},
output: {
path: utils.root('target/www'),
filename: 'app/[name].bundle.js',
chunkFilename: 'app/[id].chunk.js'
},
module: {
rules: [{
test: /\.ts$/,
enforce: 'pre',
loaders: 'tslint-loader',
exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
},
{
test: /\.ts$/,
loaders: [
'angular2-template-loader',
'awesome-typescript-loader'
],
exclude: ['node_modules/generator-jhipster']
},
{
test: /\.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: /(vendor\.scss|global\.scss)/
},
{
test: /(vendor\.scss|global\.scss)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: /(vendor\.css|global\.css)/
},
{
test: /(vendor\.css|global\.css)/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 9000,
proxy: {
target: 'http://localhost:9060'
}
}, {
reload: false
}),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
new writeFilePlugin(),
new webpack.WatchIgnorePlugin([
utils.root('src/test'),
]),
new WebpackNotifierPlugin({
title: 'JHipster',
contentImage: path.join(__dirname, 'logo-jhipster.png')
})
]
});
我尝试谷歌搜索并找到解决方案,但无济于事。
解决方案
推荐阅读
- javascript - 在对象的嵌套数组中按索引附加数组
- sql - MIN(date) 的查询未在 20 小时内完成:应该是这样,还是我做错了什么?
- asp.net-core - 如何使用 IdentityServer4 从本地数据库对本地用户进行身份验证?
- python - Python - 从列表或字符串中删除一个字符
- oracle - 用户应该属于哪个组才能对 Oracle 云基础设施进行 API 调用?
- oracle - 使用 Powershell 将大输出从 Oracle 导出到 CSV
- c# - UWP 从头到尾滚动文本
- php - 如何在php上获取mac地址?
- javascript - 如何使用 v-on 阻止负值:点击 Vuejs
- sql - 谁能帮我处理这个 SQL 查询?