Skip to content

Commit

Permalink
Webpack config prod/dev split
Browse files Browse the repository at this point in the history
EDUCATOR-1448

Modifies paver webpack task to use production configuration in all
non-devstack environments, and a development config in devstack.
  • Loading branch information
Eric Fischer committed Oct 26, 2017
1 parent e712a2f commit 3fc342e
Show file tree
Hide file tree
Showing 11 changed files with 153 additions and 69 deletions.
1 change: 1 addition & 0 deletions cms/envs/common.py
Original file line number Diff line number Diff line change
Expand Up @@ -814,6 +814,7 @@
'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json')
}
}
WEBPACK_CONFIG_PATH = 'webpack.prod.config.js'

################################# CELERY ######################################

Expand Down
3 changes: 3 additions & 0 deletions cms/envs/devstack.py
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

# Load development webpack donfiguration
WEBPACK_CONFIG_PATH = 'webpack.dev.config.js'

############################ PYFS XBLOCKS SERVICE #############################
# Set configuration for Django pyfilesystem

Expand Down
2 changes: 1 addition & 1 deletion common/static/common/js/karma.common.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ var _ = require('underscore');
var appRoot = path.join(__dirname, '../../../../');
var webdriver = require('selenium-webdriver');
var firefox = require('selenium-webdriver/firefox');
var webpackConfig = require(path.join(appRoot, 'webpack.config.js'));
var webpackConfig = require(path.join(appRoot, 'webpack.dev.config.js'));

delete webpackConfig.entry;

Expand Down
1 change: 1 addition & 0 deletions lms/envs/common.py
Original file line number Diff line number Diff line change
Expand Up @@ -1801,6 +1801,7 @@
'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json')
}
}
WEBPACK_CONFIG_PATH = 'webpack.prod.config.js'

########################## DJANGO DEBUG TOOLBAR ###############################

Expand Down
3 changes: 3 additions & 0 deletions lms/envs/devstack.py
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,9 @@ def should_show_debug_toolbar(request):

PIPELINE_SASS_ARGUMENTS = '--debug-info'

# Load development webpack donfiguration
WEBPACK_CONFIG_PATH = 'webpack.dev.config.js'

########################### VERIFIED CERTIFICATES #################################

FEATURES['AUTOMATIC_VERIFY_STUDENT_IDENTITY_FOR_TESTING'] = True
Expand Down
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
"coffee-loader": "^0.7.3",
"coffee-script": "1.6.1",
"css-loader": "^0.28.5",
"@edx/edx-bootstrap": "0.3.4",
"@edx/paragon": "0.1.0",
"@edx/studio-frontend": "0.2.0",
"@edx/edx-bootstrap": "^0.4.0",
"@edx/paragon": "^0.2.0",
"@edx/studio-frontend": "^0.3.0",
"edx-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4",
Expand Down Expand Up @@ -45,6 +45,7 @@
"underscore": "~1.8.3",
"underscore.string": "~3.3.4",
"webpack": "^2.2.1",
"webpack-merge": "^4.1.0",
"webpack-bundle-tracker": "^0.2.0",
"which-country": "1.0.0"
},
Expand Down
20 changes: 16 additions & 4 deletions pavelib/assets.py
Original file line number Diff line number Diff line change
Expand Up @@ -765,12 +765,22 @@ def webpack(options):
Run a Webpack build.
"""
settings = getattr(options, 'settings', Env.DEVSTACK_SETTINGS)
static_root_lms = Env.get_django_setting("STATIC_ROOT", "lms", settings=settings)
static_root_cms = Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
config_path = Env.get_django_setting("WEBPACK_CONFIG_PATH", "lms", settings=settings)
environment = 'NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms}'.format(
node_env="production" if settings != Env.DEVSTACK_SETTINGS else "development",
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings),
static_root_lms=static_root_lms,
static_root_cms=static_root_cms
)
sh(
cmd(
'{environment} $(npm bin)/webpack --config={config_path}'.format(
environment=environment,
config_path=config_path
)
)
)
sh(cmd('{environment} $(npm bin)/webpack'.format(environment=environment)))


def execute_webpack_watch(settings=None):
Expand All @@ -782,7 +792,9 @@ def execute_webpack_watch(settings=None):
# from Watchdog like the other watchers do.
run_background_process(
'STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack {options}'.format(
options='--watch --watch-poll=200',
options='--watch --watch-poll=200 --config={config_path}'.format(
config_path=Env.get_django_setting("WEBPACK_CONFIG_PATH", "lms", settings=settings)
),
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings),
)
Expand Down
12 changes: 8 additions & 4 deletions pavelib/paver_tests/test_servers.py
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,12 @@
)
EXPECTED_PRINT_SETTINGS_COMMAND = [
u"python manage.py lms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null",
u"python manage.py cms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null"
u"python manage.py cms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null",
u"python manage.py lms --settings={settings} print_settings WEBPACK_CONFIG_PATH --format=value 2>/dev/null"
]
EXPECTED_WEBPACK_COMMAND = (
u"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
u"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} "
"$(npm bin)/webpack --config={webpack_config_path}"
)


Expand Down Expand Up @@ -245,7 +247,8 @@ def verify_server_task(self, task_name, options, contracts_default=False):
expected_messages.append(EXPECTED_WEBPACK_COMMAND.format(
node_env="production" if expected_asset_settings != Env.DEVSTACK_SETTINGS else "development",
static_root_lms=None,
static_root_cms=None
static_root_cms=None,
webpack_config_path=None
))
expected_messages.extend(self.expected_sass_commands(system=system, asset_settings=expected_asset_settings))
if expected_collect_static:
Expand Down Expand Up @@ -288,7 +291,8 @@ def verify_run_all_servers_task(self, options):
expected_messages.append(EXPECTED_WEBPACK_COMMAND.format(
node_env="production" if expected_asset_settings != Env.DEVSTACK_SETTINGS else "development",
static_root_lms=None,
static_root_cms=None
static_root_cms=None,
webpack_config_path=None
))
expected_messages.extend(self.expected_sass_commands(asset_settings=expected_asset_settings))
if expected_collect_static:
Expand Down
58 changes: 1 addition & 57 deletions webpack.config.js → webpack.common.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,14 @@
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StringReplace = require('string-replace-webpack-plugin');

var isProd = process.env.NODE_ENV === 'production';
var extractSass = new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
disable: !isProd
});

var namespacedRequireFiles = [
path.resolve(__dirname, 'common/static/common/js/components/views/feedback_notification.js'),
path.resolve(__dirname, 'common/static/common/js/components/views/feedback.js')
];

var wpconfig = {
module.exports = {
context: __dirname,

entry: {
Expand All @@ -45,22 +38,12 @@ var wpconfig = {

output: {
path: path.resolve(__dirname, 'common/static/bundles'),
filename: isProd ? '[name].[chunkhash].js' : '[name].js',
libraryTarget: 'window'
},

devtool: isProd ? false : 'source-map',

plugins: [
new ExtractTextPlugin('node_modules/@edx/studio-frontend/dist/studio-frontend.min.css'),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
new webpack.LoaderOptionsPlugin({
debug: !isProd
}),
new BundleTracker({
path: process.env.STATIC_ROOT_CMS,
filename: 'webpack-stats.json'
Expand Down Expand Up @@ -128,34 +111,6 @@ var wpconfig = {
],
use: 'babel-loader'
},
{
test: /(.scss|.css)$/,
include: [
/studio-frontend/,
/paragon/,
/font-awesome/
],
use: extractSass.extract({
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}, {
loader: 'sass-loader',
options: {
data: '$base-rem-size: 0.625; @import "paragon-reset";',
includePaths: [
path.join(__dirname, './node_modules/@edx/paragon/src/utils'),
path.join(__dirname, './node_modules/')
],
sourceMap: true
}
}],
fallback: 'style-loader'
})
},
{
test: /\.coffee$/,
exclude: /node_modules/,
Expand Down Expand Up @@ -217,14 +172,3 @@ var wpconfig = {
poll: true
}
};

if (isProd) {
wpconfig.plugins = wpconfig.plugins.concat([
new webpack.LoaderOptionsPlugin({ // This may not be needed; legacy option for loaders written for webpack 1
minimize: true
}),
new webpack.optimize.UglifyJsPlugin()
]);
}

module.exports = wpconfig;
53 changes: 53 additions & 0 deletions webpack.dev.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/* eslint-env node */

'use strict';

var Merge = require('webpack-merge');
var path = require('path');
var webpack = require('webpack');

var commonConfig = require('./webpack.common.config.js');

module.exports = Merge.smart(commonConfig, {
output: {
filename: '[name].js'
},
devtool: 'source-map',
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
rules: [
{
test: /(.scss|.css)$/,
include: [
/studio-frontend/,
/paragon/,
/font-awesome/
],
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}, {
loader: 'sass-loader',
options: {
data: '$base-rem-size: 0.625; @import "paragon-reset";',
includePaths: [
path.join(__dirname, './node_modules/@edx/paragon/src/utils'),
path.join(__dirname, './node_modules/')
],
sourceMap: true
}
}]
}
]
}
});
62 changes: 62 additions & 0 deletions webpack.prod.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/* eslint-env node */

'use strict';

var Merge = require('webpack-merge');
var path = require('path');
var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractSass = new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css'
});

var commonConfig = require('./webpack.common.config.js');

module.exports = Merge.smart(commonConfig, {
output: {
filename: '[name].[chunkhash].js'
},
devtool: false,
plugins: [
new ExtractTextPlugin('node_modules/@edx/studio-frontend/dist/studio-frontend.min.css'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.LoaderOptionsPlugin({ // This may not be needed; legacy option for loaders written for webpack 1
minimize: true
}),
new webpack.optimize.UglifyJsPlugin()
],
module: {
rules: [
{
test: /(.scss|.css)$/,
include: [
/studio-frontend/,
/paragon/,
/font-awesome/
],
use: extractSass.extract({
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}, {
loader: 'sass-loader',
options: {
data: '$base-rem-size: 0.625; @import "paragon-reset";',
includePaths: [
path.join(__dirname, './node_modules/@edx/paragon/src/utils'),
path.join(__dirname, './node_modules/')
]
}
}],
fallback: 'style-loader'
})
}
]
}
});

0 comments on commit 3fc342e

Please sign in to comment.