Steven Dale
74dde69fd0
* Covers parts of these issues: GUI layout panes (#69), sprite libraries (#12), import buttons (#64), menu bar (#67), and sprite info area (#53) ~ Refactored layout pane structure by removing `display: flex` from `.box`, by default. Declaring flex instead only where specifically needed. This helped fix layout quirks, and should help us avoid hard to find issues related to nested flex boxes ~ Added descriptive classnames to boxes/containers/wrappers. Moved more padding, margins + layout into these wrappers to help with component reusability. ~ Set up a spacer unit variable inside `gui.css`, to start keeping consistent padding, margins and rounded corners between panes. Used [CSS/PostCSS Modules](https://github.com/css-modules/postcss-modules-values) to avoid SCSS dependency. ~ Refactored inline styles from JSX, into CSS files. 2 reasons: a) prepping for reuse of CSS Module variables. b) Feels easier to debug complex flex layouts when all the styles are in one place vs JS/HTML/CSS syntax mixed together ~ Added menu bar into layout via new component, and sprite info header in sprite selector pane, with stubs for the labels + forms. Sprite items are correctly scrolling, while leaving the header fixed, in Chrome. Mostly working in FFx. Not working in Safari, IE yet. ~ Style pass on library modal ~ Experimenting with a few different transition styles: Logo in menu bar, sprite library items, Add buttons.
96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
var path = require('path');
|
|
var webpack = require('webpack');
|
|
|
|
// Plugins
|
|
var CopyWebpackPlugin = require('copy-webpack-plugin');
|
|
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
|
|
// PostCss
|
|
var autoprefixer = require('autoprefixer');
|
|
var values = require('postcss-modules-values');
|
|
|
|
module.exports = {
|
|
devServer: {
|
|
contentBase: path.resolve(__dirname, 'build'),
|
|
host: '0.0.0.0',
|
|
port: process.env.PORT || 8601
|
|
},
|
|
entry: {
|
|
lib: ['react', 'react-dom'],
|
|
gui: './src/index.jsx'
|
|
},
|
|
output: {
|
|
path: path.resolve(__dirname, 'build'),
|
|
filename: '[name].js'
|
|
},
|
|
externals: {
|
|
React: 'react',
|
|
ReactDOM: 'react-dom'
|
|
},
|
|
module: {
|
|
rules: [{
|
|
test: /\.jsx?$/,
|
|
loader: 'babel-loader',
|
|
include: path.resolve(__dirname, 'src'),
|
|
options: {
|
|
plugins: ['transform-object-rest-spread'],
|
|
presets: [['es2015', {modules: false}], 'react']
|
|
}
|
|
},
|
|
{
|
|
test: /\.css$/,
|
|
use: [{
|
|
loader: 'style-loader'
|
|
}, {
|
|
loader: 'css-loader',
|
|
options: {
|
|
modules: true,
|
|
importLoaders: 1,
|
|
localIdentName: '[name]_[local]_[hash:base64:5]',
|
|
camelCase: true
|
|
}
|
|
}, {
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
plugins: function () {
|
|
return [
|
|
values,
|
|
autoprefixer({
|
|
browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']
|
|
})
|
|
];
|
|
}
|
|
}
|
|
}]
|
|
},
|
|
{
|
|
test: /\.svg$/,
|
|
loader: 'svg-url-loader?noquotes'
|
|
}]
|
|
},
|
|
plugins: [
|
|
new webpack.DefinePlugin({
|
|
'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
|
|
'process.env.BASE_PATH': '"' + (process.env.BASE_PATH || '/') + '"',
|
|
'process.env.DEBUG': Boolean(process.env.DEBUG)
|
|
}),
|
|
new webpack.optimize.CommonsChunkPlugin({
|
|
name: 'lib',
|
|
filename: 'lib.min.js'
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'src/index.ejs',
|
|
title: 'Scratch 3.0 GUI'
|
|
}),
|
|
new CopyWebpackPlugin([{
|
|
from: 'node_modules/scratch-blocks/media',
|
|
to: 'static/blocks-media'
|
|
}])
|
|
].concat(process.env.NODE_ENV === 'production' ? [
|
|
new webpack.optimize.UglifyJsPlugin({
|
|
include: /\.min\.js$/,
|
|
minimize: true
|
|
})
|
|
] : [])
|
|
};
|