-
Notifications
You must be signed in to change notification settings - Fork 196
/
webpack.dev.config.js
127 lines (120 loc) · 4.17 KB
/
webpack.dev.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const { createConfig } = require('@edx/frontend-build');
const { mergeWithRules } = require('webpack-merge');
const presets = require('@edx/frontend-build/lib/presets')
const webpack = require('webpack');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PostCssAutoprefixerPlugin = require('autoprefixer');
const CssNano = require('cssnano');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// Get base config from edx-platform
let config = createConfig('webpack-dev');
// Modify CSS processing rules (remove PostCssRtlPlugin)
const modifiedCssRule = {
module: {
rules: [
// This babel-loader config is pulled from [email protected]
// When we update frontend-build to above that version, this section
// can be removed and we can fallback to the implementation upstream.
//
// We had to do this because frontend-build is currently too far behind
// and can't easily be updated to a newer version without upgrading
// webpack and many other libraries.
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!@(open)?edx)/,
use: {
loader: 'babel-loader',
options: {
configFile: presets.babel.resolvedFilepath,
},
},
},
{
test: /(.scss|.css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader', // translates CSS into CommonJS
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
PostCssAutoprefixerPlugin({ grid: true }),
CssNano(),
],
},
},
},
'resolve-url-loader',
{
loader: 'sass-loader', // compiles Sass to CSS
options: {
sourceMap: true,
sassOptions: {
includePaths: [
path.join(process.cwd(), 'node_modules'),
path.join(process.cwd(), 'src'),
],
},
},
},
],
},
],
},
};
// Merge back to configuration
config = mergeWithRules({
module: {
rules: {
test: 'match',
exclude: 'replace',
use: 'replace',
},
},
})(config, modifiedCssRule);
Object.assign(config, {
entry: {
'openassessment-lms': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms_index.js'),
'openassessment-studio': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/studio_index.js'),
'openassessment-rtl': path.resolve(process.cwd(), 'openassessment/xblock/static/sass/openassessment-rtl.scss'),
'openassessment-ltr': path.resolve(process.cwd(), 'openassessment/xblock/static/sass/openassessment-ltr.scss'),
'openassessment-editor-textarea': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms/editors/oa_editor_textarea.js'),
'openassessment-editor-tinymce': path.resolve(process.cwd(), 'openassessment/xblock/static/js/src/lms/editors/oa_editor_tinymce.js'),
},
output: {
path: path.resolve(process.cwd(), 'openassessment/xblock/static/dist'),
},
optimization: {},
plugins: [
// Cleans the dist directory before each build
new CleanWebpackPlugin(),
new Dotenv({
path: path.resolve(process.cwd(), '.env'),
systemvars: true,
}),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new webpack.ProvidePlugin({
Backgrid: path.resolve(path.join(__dirname, 'openassessment/xblock/static/js/lib/backgrid/backgrid')),
}),
...process.env.WEBPACK_SERVE ? [new WebpackManifestPlugin({
seed: {
base_url: `http://localhost:${config.devServer.port}/`
},
writeToFileEmit: true,
})]: [],
new webpack.HotModuleReplacementPlugin(),
],
});
config.resolve.modules = ['node_modules', path.resolve(__dirname, 'openassessment/xblock/static/js/src')];
module.exports = config;