mirror of
https://github.com/ansible/awx.git
synced 2026-05-19 23:07:42 -02:30
Update UI build system
* Faster build times * Smaller bundle sizes * Adjust paths * Cleanup npm dependencies * Remove unneded Grunt tasks
This commit is contained in:
gconsidine
198
awx/ui/build/webpack.base.js
Normal file
198
awx/ui/build/webpack.base.js
Normal file
@@ -0,0 +1,198 @@
|
||||
const path = require('path');
|
||||
|
||||
const webpack = require('webpack');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
const CLIENT_PATH = path.resolve(__dirname, '../client');
|
||||
const LIB_PATH = path.join(CLIENT_PATH, 'lib');
|
||||
const UI_PATH = path.resolve(__dirname, '..');
|
||||
|
||||
const ASSETS_PATH = path.join(CLIENT_PATH, 'assets');
|
||||
const COMPONENTS_PATH = path.join(LIB_PATH, 'components');
|
||||
const COVERAGE_PATH = path.join(UI_PATH, 'coverage');
|
||||
const FEATURES_PATH = path.join(CLIENT_PATH, 'features');
|
||||
const LANGUAGES_PATH = path.join(CLIENT_PATH, 'languages');
|
||||
const MODELS_PATH = path.join(LIB_PATH, 'models');
|
||||
const NODE_MODULES_PATH = path.join(UI_PATH, 'node_modules');
|
||||
const SERVICES_PATH = path.join(LIB_PATH, 'services');
|
||||
const SOURCE_PATH = path.join(CLIENT_PATH, 'src');
|
||||
const STATIC_PATH = path.join(UI_PATH, 'static');
|
||||
|
||||
const APP_ENTRY = path.join(SOURCE_PATH, 'app.js');
|
||||
const VENDOR_ENTRY = path.join(SOURCE_PATH, 'vendor.js');
|
||||
const INDEX_ENTRY = path.join(CLIENT_PATH, 'index.template.html');
|
||||
const INDEX_OUTPUT = path.join(UI_PATH, 'templates/ui/index.html');
|
||||
const THEME_ENTRY = path.join(LIB_PATH, 'theme', 'index.less');
|
||||
const OUTPUT = 'js/[name].[hash].js';
|
||||
const CHUNKS = ['vendor', 'app'];
|
||||
|
||||
const VENDOR = VENDOR_ENTRY;
|
||||
const APP = [THEME_ENTRY, APP_ENTRY];
|
||||
|
||||
let base = {
|
||||
entry: {
|
||||
vendor: VENDOR,
|
||||
app: APP
|
||||
},
|
||||
output: {
|
||||
path: STATIC_PATH,
|
||||
publicPath: '{{ STATIC_URL }}',
|
||||
filename: OUTPUT
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
url: false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\lib\/theme\/index.less$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: ['css-loader', 'less-loader']
|
||||
})
|
||||
},
|
||||
{
|
||||
test: require.resolve('jquery'),
|
||||
loader: 'expose-loader?$!expose-loader?jQuery!expose-loader?jquery'
|
||||
},
|
||||
{
|
||||
loader: 'script-loader',
|
||||
test: [
|
||||
/node_modules\/javascript-detect-element-resize\/jquery.resize\.js$/,
|
||||
/node_modules\/d3\/d3\.min.js$/
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'imports-loader?define=>false'
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: ['ngtemplate-loader', 'html-loader'],
|
||||
include: [
|
||||
/lib\/components\//,
|
||||
/features\//
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader',
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
jsyaml: 'js-yaml',
|
||||
CodeMirror: 'codemirror',
|
||||
jsonlint: 'codemirror.jsonlint',
|
||||
_: 'lodash'
|
||||
}),
|
||||
new ExtractTextPlugin('css/[name].[hash].css'),
|
||||
new CleanWebpackPlugin([STATIC_PATH, COVERAGE_PATH], {
|
||||
root: UI_PATH,
|
||||
}),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.join(ASSETS_PATH, 'fontcustom/**/*'),
|
||||
to: path.join(STATIC_PATH, 'fonts/'),
|
||||
flatten: true
|
||||
},
|
||||
{
|
||||
from: path.join(NODE_MODULES_PATH, 'components-font-awesome/fonts/*'),
|
||||
to: path.join(STATIC_PATH, 'fonts/'),
|
||||
flatten: true
|
||||
},
|
||||
{
|
||||
from: path.join(ASSETS_PATH, 'custom-theme/images.new/*'),
|
||||
to: path.join(STATIC_PATH, 'images/'),
|
||||
flatten: true
|
||||
},
|
||||
{
|
||||
from: path.join(LANGUAGES_PATH, '*'),
|
||||
to: path.join(STATIC_PATH, 'languages'),
|
||||
flatten: true
|
||||
},
|
||||
{
|
||||
from: ASSETS_PATH,
|
||||
to: path.join(STATIC_PATH, 'assets')
|
||||
},
|
||||
{
|
||||
from: path.join(NODE_MODULES_PATH, 'angular-scheduler/lib/*.html'),
|
||||
to: path.join(STATIC_PATH, 'lib'),
|
||||
context: NODE_MODULES_PATH
|
||||
},
|
||||
{
|
||||
from: path.join(NODE_MODULES_PATH, 'angular-tz-extensions/tz/data/*'),
|
||||
to: path.join(STATIC_PATH, 'lib/'),
|
||||
context: NODE_MODULES_PATH
|
||||
},
|
||||
{
|
||||
from: path.join(SOURCE_PATH, '**/*.partial.html'),
|
||||
to: path.join(STATIC_PATH, 'partials/'),
|
||||
context: SOURCE_PATH
|
||||
},
|
||||
{
|
||||
from: path.join(SOURCE_PATH, 'partials', '*.html'),
|
||||
to: STATIC_PATH,
|
||||
context: SOURCE_PATH
|
||||
},
|
||||
{
|
||||
from: path.join(SOURCE_PATH, '*config.js'),
|
||||
to: STATIC_PATH,
|
||||
flatten: true
|
||||
}
|
||||
]),
|
||||
new HtmlWebpackPlugin({
|
||||
alwaysWriteToDisk: true,
|
||||
template: INDEX_ENTRY,
|
||||
filename: INDEX_OUTPUT,
|
||||
inject: 'head',
|
||||
chunks: CHUNKS,
|
||||
chunksSortMode: (moduleA, moduleB) => {
|
||||
moduleA.files.sort((fileA, fileB) => fileA.includes('js') ? -1 : 1)
|
||||
moduleB.files.sort((fileA, fileB) => fileA.includes('js') ? -1 : 1)
|
||||
|
||||
return moduleA.names[0] === 'vendor' ? -1 : 1
|
||||
}
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@features': FEATURES_PATH,
|
||||
'@models': MODELS_PATH,
|
||||
'@services': SERVICES_PATH,
|
||||
'@components': COMPONENTS_PATH,
|
||||
'@modules': NODE_MODULES_PATH,
|
||||
'@assets': ASSETS_PATH,
|
||||
'd3$': '@modules/d3/d3.min.js',
|
||||
'codemirror.jsonlint$': '@modules/codemirror/addon/lint/json-lint.js',
|
||||
'jquery-resize$': '@modules/javascript-detect-element-resize/jquery.resize.js',
|
||||
'select2$': '@modules/select2/dist/js/select2.full.min.js',
|
||||
'js-yaml$': '@modules/js-yaml/dist/js-yaml.min.js',
|
||||
'lr-infinite-scroll$': '@modules/lr-infinite-scroll/lrInfiniteScroll.js',
|
||||
'angular-ui-router$': '@modules/angular-ui-router/release/angular-ui-router.js',
|
||||
'angular-ui-router-state-events$': '@modules/angular-ui-router/release/stateEvents.js',
|
||||
'ng-toast-provider$': '@modules/ng-toast/src/scripts/provider.js',
|
||||
'ng-toast-directives$': '@modules/ng-toast/src/scripts/directives.js',
|
||||
'ng-toast$': '@modules/ng-toast/src/scripts/module.js'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = base;
|
||||
11
awx/ui/build/webpack.development.js
Normal file
11
awx/ui/build/webpack.development.js
Normal file
@@ -0,0 +1,11 @@
|
||||
const path = require('path');
|
||||
|
||||
const _ = require('lodash');
|
||||
|
||||
let base = require('./webpack.base');
|
||||
|
||||
let development = {
|
||||
devtool: 'cheap-source-map'
|
||||
};
|
||||
|
||||
module.exports = _.merge(base, development);
|
||||
19
awx/ui/build/webpack.production.js
Normal file
19
awx/ui/build/webpack.production.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const _ = require('lodash');
|
||||
|
||||
const webpack = require('webpack');
|
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
||||
|
||||
let base = require('./webpack.base');
|
||||
|
||||
let production = {
|
||||
plugins: [
|
||||
new UglifyJSPlugin({
|
||||
compress: true,
|
||||
mangle: false
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
production.plugins = base.plugins.concat(production.plugins)
|
||||
|
||||
module.exports = _.merge(base, production);
|
||||
21
awx/ui/build/webpack.test.js
Normal file
21
awx/ui/build/webpack.test.js
Normal file
@@ -0,0 +1,21 @@
|
||||
const path = require('path');
|
||||
|
||||
const _ = require('lodash');
|
||||
const webpack = require('webpack');
|
||||
|
||||
const STATIC_URL = '/static/';
|
||||
|
||||
let development = require('./webpack.development');
|
||||
|
||||
let test = {
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
$basePath: STATIC_URL
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
test.plugins = development.plugins.concat(test.plugins)
|
||||
|
||||
module.exports = _.merge(development, test);
|
||||
|
||||
43
awx/ui/build/webpack.watch.js
Normal file
43
awx/ui/build/webpack.watch.js
Normal file
@@ -0,0 +1,43 @@
|
||||
const path = require('path');
|
||||
|
||||
const _ = require('lodash');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
|
||||
|
||||
const TARGET_PORT = _.get(process.env, 'npm_package_config_django_port', 8043);
|
||||
const TARGET_HOST = _.get(process.env, 'npm_package_config_django_host', 'https://localhost');
|
||||
const TARGET = `https://${TARGET_HOST}:${TARGET_PORT}`;
|
||||
const STATIC_URL = '/static/';
|
||||
|
||||
let development = require('./webpack.development');
|
||||
|
||||
let watch = {
|
||||
plugins: [
|
||||
new HtmlWebpackHarddiskPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
],
|
||||
devServer: {
|
||||
contentBase: path.resolve(__dirname, '..', 'static'),
|
||||
publicPath: STATIC_URL,
|
||||
clientLogLevel: 'info',
|
||||
host: '127.0.0.1',
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/': {
|
||||
target: TARGET,
|
||||
secure: false,
|
||||
ws: false
|
||||
},
|
||||
'/websocket': {
|
||||
target: TARGET,
|
||||
secure: false,
|
||||
ws: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch.plugins = development.plugins.concat(watch.plugins)
|
||||
|
||||
module.exports = _.merge(development, watch);
|
||||
|
||||
Reference in New Issue
Block a user