From 45a5e7853f8d902f462872df0dab498d46118b89 Mon Sep 17 00:00:00 2001
From: Eric Fischer <efischer@edx.org>
Date: Tue, 26 Sep 2017 17:03:11 -0400
Subject: [PATCH] Correctly install and load webpacked studio-frontend
---
cms/templates/asset_index.html | 6 +----
package.json | 12 ++++++++-
pavelib/assets.py | 4 ---
webpack.config.js | 47 ++++++++++++++++++++++++++++++++++
4 files changed, 59 insertions(+), 10 deletions(-)
diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html
index 9634501eaa4..65d75daaa92 100644
--- a/cms/templates/asset_index.html
+++ b/cms/templates/asset_index.html
@@ -13,16 +13,11 @@
<%namespace name='static' file='static_content.html'/>
<%block name="header_extras">
-% if waffle_flag_enabled:
- <link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/studio-frontend.min.css')}" />
- <script type="text/javascript" src="${static.url('common/js/vendor/assets.min.js')}" defer></script>
-% else:
% for template_name in ["asset"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="js/${template_name}.underscore" />
</script>
% endfor
-% endif
</%block>
% if not waffle_flag_enabled:
@@ -62,6 +57,7 @@
<div class="content-primary">
% if waffle_flag_enabled:
<div id="root"></div>
+ <%static:webpack entry="AssetsPage"></%static:webpack>
% else:
<div class="wrapper-assets"></div>
% endif
diff --git a/package.json b/package.json
index a0a12a82835..0c01aa58193 100644
--- a/package.json
+++ b/package.json
@@ -4,17 +4,24 @@
"dependencies": {
"babel-core": "^6.23.0",
"babel-loader": "^6.4.0",
+ "babel-plugin-transform-class-properties": "^6.24.1",
+ "babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.2.1",
"babel-preset-react": "^6.24.1",
"backbone": "~1.3.2",
"backbone.paginator": "~2.0.3",
"coffee-loader": "^0.7.3",
"coffee-script": "1.6.1",
- "@edx/studio-frontend": "0.1.0",
+ "css-loader": "^0.28.5",
"@edx/edx-bootstrap": "0.3.4",
+ "@edx/paragon": "0.1.0",
+ "@edx/studio-frontend": "0.2.0",
"edx-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4",
+ "extract-text-webpack-plugin": "^2.1.2",
+ "file-loader": "^1.1.4",
+ "font-awesome": "^4.7.0",
"hls.js": "0.7.2",
"imports-loader": "^0.7.1",
"jquery": "~2.2.0",
@@ -22,6 +29,7 @@
"jquery.scrollto": "~2.1.2",
"moment": "2.18.1",
"moment-timezone": "~0.5.5",
+ "node-sass": "^4.5.3",
"picturefill": "~3.0.2",
"popper.js": "~1.12.5",
"prop-types": "^15.5.10",
@@ -30,6 +38,8 @@
"react-dom": "^15.5.4",
"requirejs": "~2.3.2",
"rtlcss": "^2.2.0",
+ "sass-loader": "^6.0.6",
+ "style-loader": "^0.18.2",
"string-replace-webpack-plugin": "^0.1.3",
"uglify-js": "2.7.0",
"underscore": "~1.8.3",
diff --git a/pavelib/assets.py b/pavelib/assets.py
index 1ddf112683e..48eec72201a 100644
--- a/pavelib/assets.py
+++ b/pavelib/assets.py
@@ -64,10 +64,6 @@ NPM_INSTALLED_LIBRARIES = [
'requirejs/require.js',
'underscore.string/dist/underscore.string.js',
'underscore/underscore.js',
- '@edx/studio-frontend/dist/assets.min.js',
- '@edx/studio-frontend/dist/assets.min.js.map',
- '@edx/studio-frontend/dist/studio-frontend.min.css',
- '@edx/studio-frontend/dist/studio-frontend.min.css.map',
'which-country/index.js'
]
diff --git a/webpack.config.js b/webpack.config.js
index afd6ce26f67..55a5d7bd799 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,9 +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'),
@@ -19,6 +24,7 @@ var wpconfig = {
entry: {
// Studio
+ AssetsPage: './node_modules/@edx/studio-frontend/src/index.jsx',
Import: './cms/static/js/features/import/factories/import.js',
StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
@@ -43,6 +49,7 @@ var wpconfig = {
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({
@@ -110,6 +117,42 @@ var wpconfig = {
],
use: 'babel-loader'
},
+ {
+ test: /\.(js|jsx)$/,
+ include: [
+ /studio-frontend/,
+ /paragon/
+ ],
+ 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/,
@@ -130,6 +173,10 @@ var wpconfig = {
'exports-loader?this.AjaxPrefix!../../../../common/static/coffee/src/ajax_prefix.coffee'
}
}
+ },
+ {
+ test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
+ loader: 'file-loader'
}
]
},
--
GitLab