grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP - Webpack 2 building

Browse Source
This commit is contained in:
Nicolas Gotchac 2016-11-25 19:32:58 +01:00
parent a534949b2d
commit 8392090861
10 changed files with 126 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/.babelrc
View File

@ -1,5 +1,9 @@
{
"presets": ["es2017", "es2016", "es2015", "stage-0", "react"],
"presets": [
"es2017", "es2016",
[ "es2015", { "modules": false } ],
"stage-0", "react"
],
"plugins": [
"transform-runtime",
"transform-decorators-legacy",

3
js/package.json
View File

@ -100,10 +100,11 @@
"mock-local-storage": "1.0.2",
"mock-socket": "~3.0.1",
"nock": "~8.0.0",
"postcss-import": "~8.1.2",
"postcss-import": "8.1.0",
"postcss-loader": "~1.1.1",
"postcss-nested": "~1.0.0",
"postcss-simple-vars": "~3.0.0",
"progress": "^1.1.8",
"raw-loader": "~0.5.1",
"react-addons-perf": "~15.3.2",
"react-addons-test-utils": "~15.3.2",

2
js/src/contracts/contracts.js
View File

@ -19,7 +19,7 @@ import Registry from './registry';
import SignatureReg from './signaturereg';
import TokenReg from './tokenreg';
import GithubHint from './githubhint';
import smsVerification from './sms-verification';
import * as smsVerification from './sms-verification';
let instance = null;

6
js/src/views/WriteContract/writeContractStore.js
View File

@ -24,17 +24,17 @@ const SNIPPETS = {
snippet0: {
name: 'Token.sol',
description: 'Standard ERP20 Token Contract',
id: 'snippet0', sourcecode: require('raw!../../contracts/snippets/token.sol')
id: 'snippet0', sourcecode: require('raw-loader!../../contracts/snippets/token.sol')
},
snippet1: {
name: 'StandardToken.sol',
description: 'Implementation of ERP20 Token Contract',
id: 'snippet1', sourcecode: require('raw!../../contracts/snippets/standard-token.sol')
id: 'snippet1', sourcecode: require('raw-loader!../../contracts/snippets/standard-token.sol')
},
snippet2: {
name: 'HumanStandardToken.sol',
description: 'Implementation of the Human Token Contract',
id: 'snippet2', sourcecode: require('raw!../../contracts/snippets/human-standard-token.sol')
id: 'snippet2', sourcecode: require('raw-loader!../../contracts/snippets/human-standard-token.sol')
}
};

59
js/webpack/config.js
View File

@ -31,7 +31,6 @@ const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
module.exports = {
debug: !isProd,
cache: !isProd,
devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
@ -46,43 +45,61 @@ module.exports = {
},
module: {
loaders: [
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [ 'happypack/loader?id=js' ]
// use: [ 'happypack/loader?id=js' ]
use: isProd ? ['babel-loader'] : [
// 'react-hot-loader',
'babel-loader?cacheDirectory=true'
]
},
{
test: /\.js$/,
include: /node_modules\/material-ui-chip-input/,
loader: 'babel'
use: [ 'babel-loader' ]
},
{
test: /\.json$/,
loaders: ['json']
use: [ 'json-loader' ]
},
{
test: /\.html$/,
loader: 'file?name=[name].[ext]!extract-loader!html-loader'
use: [
'file-loader?name=[name].[ext]!extract-loader',
{
loader: 'html-loader',
options: {
root: path.resolve(__dirname, '../assets/images'),
attrs: ['img:src', 'link:href']
}
}
]
},
{
test: /\.css$/,
include: [/src/],
loaders: [ 'happypack/loader?id=css' ]
include: [ /src/ ],
// use: [ 'happypack/loader?id=css' ]
use: [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader'
]
},
{
test: /\.css$/,
exclude: [/src/],
loader: 'style!css'
exclude: [ /src/ ],
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=[name].[hash].[ext]'
use: [ 'file-loader?name=[name].[hash].[ext]' ]
},
{
test: /\.(woff(2)|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
use: [ 'file-loader' ]
}
],
noParse: [
@ -91,22 +108,12 @@ module.exports = {
},
resolve: {
root: path.join(__dirname, '../node_modules'),
fallback: path.join(__dirname, '../node_modules'),
extensions: ['', '.js', '.jsx'],
modules: [
path.join(__dirname, '../node_modules')
],
extensions: ['.json', '.js', '.jsx'],
unsafeCache: true
},
resolveLoaders: {
root: path.join(__dirname, '../node_modules'),
fallback: path.join(__dirname, '../node_modules')
},
htmlLoader: {
root: path.resolve(__dirname, '../assets/images'),
attrs: ['img:src', 'link:href']
},
postcss: Shared.postcss,
plugins: (function () {
const plugins = Shared.getPlugins().concat([

7
js/webpack/dev.server.js
View File

@ -20,11 +20,13 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
const http = require('http');
const express = require('express');
const ProgressBar = require('progress');
const webpackConfig = require('./config');
const Shared = require('./shared');
const hotMiddlewareScript = 'webpack-hot-middleware/client';
let progressBar = { update: () => {} };
/**
* Add webpack hot middleware to each entry in the config
@ -39,6 +41,9 @@ const hotMiddlewareScript = 'webpack-hot-middleware/client';
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
webpackConfig.plugins.push(new webpack.ProgressPlugin(
(percentage) => progressBar.update(percentage)
));
})();
const app = express();
@ -47,6 +52,7 @@ const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
noInfo: false,
quiet: false,
progress: true,
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true
@ -65,4 +71,5 @@ Shared.addProxies(app);
const server = http.createServer(app);
server.listen(process.env.PORT || 3000, function () {
console.log('Listening on port', server.address().port);
progressBar = new ProgressBar('[:bar] :percent :etas', { total: 50 });
});

14
js/webpack/libraries.js
View File

@ -21,6 +21,8 @@ const path = require('path');
const Shared = require('./shared');
const DEST = process.env.BUILD_DEST || '.build';
const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
module.exports = {
context: path.join(__dirname, '../src'),
@ -37,19 +39,23 @@ module.exports = {
libraryTarget: 'umd'
},
module: {
loaders: [
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'happypack/loader?id=js'
// use: [ 'happypack/loader?id=js' ]
use: isProd ? ['babel-loader'] : [
// 'react-hot-loader',
'babel-loader?cacheDirectory=true'
]
},
{
test: /\.json$/,
loaders: ['json']
use: [ 'json-loader' ]
},
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
use: [ 'file-loader?name=[name].[ext]' ]
}
]
},

18
js/webpack/npm.js
View File

@ -15,7 +15,6 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const packageJson = require('../package.json');
@ -43,18 +42,27 @@ module.exports = {
noParse: [
/babel-polyfill/
],
loaders: [
rules: [
{
test: /(\.jsx|\.js)$/,
loaders: [ 'happypack/loader?id=js' ],
// use: [ 'happypack/loader?id=js' ],
use: isProd ? ['babel-loader'] : [
// 'react-hot-loader',
'babel-loader?cacheDirectory=true'
],
exclude: /node_modules/
}
]
},
resolve: {
root: path.resolve('./src'),
extensions: ['', '.js']
modules: [
path.resolve('./src'),
path.join(__dirname, '../node_modules')
],
extensions: ['.json', '.js', '.jsx']
},
plugins: Shared.getPlugins().concat([
new CopyWebpackPlugin([
{

90
js/webpack/shared.js
View File

@ -15,7 +15,8 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const webpack = require('webpack');
const HappyPack = require('happypack');
const path = require('path');
// const HappyPack = require('happypack');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
@ -26,31 +27,46 @@ const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
function getPlugins (_isProd = isProd) {
const postcss = [
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
];
const plugins = [
new HappyPack({
id: 'css',
threads: 4,
loaders: [
'style',
'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss'
]
}),
// new HappyPack({
// id: 'css',
// threads: 4,
// loaders: [
// 'style-loader',
// 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
// 'postcss-loader'
// ]
// }),
new HappyPack({
id: 'js',
threads: 4,
loaders: _isProd ? ['babel'] : [
'react-hot',
'babel?cacheDirectory=true'
]
}),
// new HappyPack({
// id: 'js',
// threads: 4,
// loaders: _isProd ? ['babel'] : [
// 'react-hot-loader',
// 'babel-loader?cacheDirectory=true'
// ]
// }),
new HappyPack({
id: 'babel',
threads: 4,
loaders: ['babel']
}),
// new HappyPack({
// id: 'babel',
// threads: 4,
// loaders: ['babel-loader']
// }),
new webpack.DefinePlugin({
'process.env': {
@ -62,11 +78,19 @@ function getPlugins (_isProd = isProd) {
}
}),
new webpack.LoaderOptionsPlugin({
minimize: isProd,
debug: !isProd,
options: {
context: path.join(__dirname, '../src'),
postcss: postcss
}
}),
new webpack.optimize.OccurrenceOrderPlugin(!_isProd)
];
if (_isProd) {
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
@ -90,21 +114,6 @@ function getDappsEntry () {
}, {});
}
const postcss = [
postcssImport({
addDependencyTo: webpack
}),
postcssNested({}),
postcssVars({
unknown: function (node, name, result) {
node.warn(result, `Unknown variable ${name}`);
}
}),
rucksack({
autoprefixer: true
})
];
function addProxies (app) {
const proxy = require('http-proxy-middleware');
@ -147,6 +156,5 @@ function addProxies (app) {
module.exports = {
getPlugins: getPlugins,
dappsEntry: getDappsEntry(),
addProxies: addProxies,
postcss: postcss
addProxies: addProxies
};

6
js/webpack/vendor.js
View File

@ -51,15 +51,15 @@ module.exports = {
vendor: modules
},
module: {
loaders: [
rules: [
{
test: /\.json$/,
loaders: ['json']
use: [ 'json-loader' ]
},
{
test: /\.js$/,
include: /(ethereumjs-tx)/,
loaders: [ 'happypack/loader?id=babel' ]
use: [ 'babel-loader' ]
}
]
},