Reuse Webpack Configs

This commit is contained in:
Nicolas Gotchac 2016-11-24 03:11:54 +01:00
parent 52bd9eabb6
commit 0750d82115
6 changed files with 141 additions and 186 deletions

View File

@ -26,16 +26,16 @@
], ],
"scripts": { "scripts": {
"build": "npm run build:lib && npm run build:dll && npm run build:app", "build": "npm run build:lib && npm run build:dll && npm run build:app",
"build:app": "webpack --progress", "build:app": "webpack --config webpack/config --progress",
"build:lib": "webpack --config webpack.libraries --progress", "build:lib": "webpack --config webpack/libraries --progress",
"build:dll": "webpack --config webpack.vendor --progress", "build:dll": "webpack --config webpack/vendor --progress",
"ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app", "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app",
"ci:build:app": "NODE_ENV=production webpack", "ci:build:app": "NODE_ENV=production webpack --config webpack/config",
"ci:build:lib": "NODE_ENV=production webpack --config webpack.libraries", "ci:build:lib": "NODE_ENV=production webpack --config webpack/libraries",
"ci:build:dll": "NODE_ENV=production webpack --config webpack.vendor", "ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor",
"ci:build:npm": "NODE_ENV=production webpack --config webpack.npm", "ci:build:npm": "NODE_ENV=production webpack --config webpack/npm",
"start": "npm install && npm run build:lib && npm run build:dll && npm run start:app", "start": "npm install && npm run build:lib && npm run build:dll && npm run start:app",
"start:app": "webpack-dev-server -d --history-api-fallback --open --hot --inline --progress --colors --port 3000", "start:app": "webpack-dev-server --config webpack/config -d --history-api-fallback --open --hot --inline --progress --colors --port 3000",
"clean": "rm -rf ./build ./coverage", "clean": "rm -rf ./build ./coverage",
"coveralls": "npm run testCoverage && coveralls < coverage/lcov.info", "coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
"lint": "eslint --ignore-path .gitignore ./src/", "lint": "eslint --ignore-path .gitignore ./src/",

View File

@ -15,7 +15,6 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
const HappyPack = require('happypack');
const path = require('path'); const path = require('path');
const postcssImport = require('postcss-import'); const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested'); const postcssNested = require('postcss-nested');
@ -26,11 +25,13 @@ const WebpackErrorNotificationPlugin = require('webpack-error-notification');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const Shared = require('./shared');
const ENV = process.env.NODE_ENV || 'development'; const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production'; const isProd = ENV === 'production';
const DEST = process.env.BUILD_DEST || '.build'; const DEST = process.env.BUILD_DEST || '.build';
const FAVICON = path.resolve(__dirname, 'assets/images/parity-logo-black-no-text.png'); const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-text.png');
const DAPPS = [ const DAPPS = [
{ name: 'basiccoin', entry: './dapps/basiccoin.js', title: 'Basic Token Deployment' }, { name: 'basiccoin', entry: './dapps/basiccoin.js', title: 'Basic Token Deployment' },
@ -55,10 +56,10 @@ module.exports = {
debug: !isProd, debug: !isProd,
cache: !isProd, cache: !isProd,
devtool: isProd ? '#eval' : '#cheap-module-eval-source-map', devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
context: path.join(__dirname, './src'), context: path.join(__dirname, '../src'),
entry: entry, entry: entry,
output: { output: {
path: path.join(__dirname, DEST), path: path.join(__dirname, '../', DEST),
filename: '[name].[hash].js' filename: '[name].[hash].js'
}, },
module: { module: {
@ -110,18 +111,18 @@ module.exports = {
] ]
}, },
resolve: { resolve: {
root: path.join(__dirname, 'node_modules'), root: path.join(__dirname, '../node_modules'),
fallback: path.join(__dirname, 'node_modules'), fallback: path.join(__dirname, '../node_modules'),
extensions: ['', '.js', '.jsx'], extensions: ['', '.js', '.jsx'],
unsafeCache: true unsafeCache: true
}, },
resolveLoaders: { resolveLoaders: {
root: path.join(__dirname, 'node_modules'), root: path.join(__dirname, '../node_modules'),
fallback: path.join(__dirname, 'node_modules') fallback: path.join(__dirname, '../node_modules')
}, },
htmlLoader: { htmlLoader: {
root: path.resolve(__dirname, 'assets/images'), root: path.resolve(__dirname, '../assets/images'),
attrs: ['img:src', 'link:href'] attrs: ['img:src', 'link:href']
}, },
@ -140,38 +141,13 @@ module.exports = {
}) })
], ],
plugins: (function () { plugins: (function () {
const plugins = [ const plugins = Shared.getPlugins().concat([
new HappyPack({
id: 'css',
threads: 4,
loaders: [
'style',
'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss'
]
}),
new HappyPack({
id: 'js',
threads: 4,
loaders: isProd ? ['babel'] : [
'react-hot',
'babel?cacheDirectory=true'
]
}),
new CopyWebpackPlugin([{ from: './error_pages.css', to: 'styles.css' }], {}), new CopyWebpackPlugin([{ from: './error_pages.css', to: 'styles.css' }], {}),
new WebpackErrorNotificationPlugin(), new WebpackErrorNotificationPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(ENV),
RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
PARITY_URL: JSON.stringify(process.env.PARITY_URL),
LOGGING: JSON.stringify(!isProd)
}
}),
new webpack.DllReferencePlugin({ new webpack.DllReferencePlugin({
context: '.', context: '.',
manifest: require(`./${DEST}/vendor-manifest.json`) manifest: require(`../${DEST}/vendor-manifest.json`)
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
@ -181,9 +157,7 @@ module.exports = {
favicon: FAVICON, favicon: FAVICON,
chunks: [ isProd ? null : 'commons', 'index' ] chunks: [ isProd ? null : 'commons', 'index' ]
}) })
]; ], DAPPS.map((dapp) => {
DAPPS.map((dapp) => {
return new HtmlWebpackPlugin({ return new HtmlWebpackPlugin({
title: dapp.title, title: dapp.title,
filename: dapp.name + '.html', filename: dapp.name + '.html',
@ -192,7 +166,7 @@ module.exports = {
secure: dapp.secure, secure: dapp.secure,
chunks: [ isProd ? null : 'commons', dapp.name ] chunks: [ isProd ? null : 'commons', dapp.name ]
}); });
}).forEach((plugin) => plugins.push(plugin)); }));
if (!isProd) { if (!isProd) {
plugins.push( plugins.push(
@ -203,24 +177,10 @@ module.exports = {
); );
} }
if (isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
warnings: false
},
output: {
comments: false
}
}));
}
return plugins; return plugins;
}()), }()),
devServer: { devServer: {
contentBase: `./${DEST}`, contentBase: path.resolve(__dirname, `../${DEST}`),
historyApiFallback: false, historyApiFallback: false,
quiet: false, quiet: false,
hot: !isProd, hot: !isProd,

View File

@ -16,16 +16,14 @@
// Run with `webpack --config webpack.libraries.js --progress` // Run with `webpack --config webpack.libraries.js --progress`
const HappyPack = require('happypack');
const path = require('path'); const path = require('path');
const webpack = require('webpack');
const ENV = process.env.NODE_ENV || 'development'; const Shared = require('./shared');
const isProd = ENV === 'production';
const DEST = process.env.BUILD_DEST || '.build'; const DEST = process.env.BUILD_DEST || '.build';
module.exports = { module.exports = {
context: path.join(__dirname, './src'), context: path.join(__dirname, '../src'),
entry: { entry: {
// library // library
'inject': ['./web3.js'], 'inject': ['./web3.js'],
@ -33,7 +31,7 @@ module.exports = {
'parity': ['./parity.js'] 'parity': ['./parity.js']
}, },
output: { output: {
path: path.join(__dirname, DEST), path: path.join(__dirname, '../', DEST),
filename: '[name].js', filename: '[name].js',
library: '[name].js', library: '[name].js',
libraryTarget: 'umd' libraryTarget: 'umd'
@ -55,37 +53,5 @@ module.exports = {
} }
] ]
}, },
plugins: (function () { plugins: Shared.getPlugins()
const plugins = [
new HappyPack({
id: 'js',
threads: 4,
loaders: [ 'babel' ]
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(ENV),
RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
PARITY_URL: JSON.stringify(process.env.PARITY_URL),
LOGGING: JSON.stringify(!isProd)
}
})
];
if (isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
warnings: false
},
output: {
comments: false
}
}));
}
return plugins;
}())
}; };

View File

@ -17,17 +17,19 @@
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
const packageJson = require('./package.json'); const packageJson = require('../package.json');
const Shared = require('./shared');
const ENV = process.env.NODE_ENV || 'development'; const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production'; const isProd = ENV === 'production';
module.exports = { module.exports = {
context: path.join(__dirname, './src'), context: path.join(__dirname, '../src'),
target: 'node', target: 'node',
entry: 'library.js', entry: 'library.js',
output: { output: {
path: path.join(__dirname, '.npmjs'), path: path.join(__dirname, '../.npmjs'),
filename: 'library.js', filename: 'library.js',
library: 'Parity', library: 'Parity',
libraryTarget: 'umd', libraryTarget: 'umd',
@ -44,7 +46,7 @@ module.exports = {
loaders: [ loaders: [
{ {
test: /(\.jsx|\.js)$/, test: /(\.jsx|\.js)$/,
loader: 'babel', loaders: [ 'happypack/loader?id=js' ],
exclude: /node_modules/ exclude: /node_modules/
} }
] ]
@ -53,40 +55,24 @@ module.exports = {
root: path.resolve('./src'), root: path.resolve('./src'),
extensions: ['', '.js'] extensions: ['', '.js']
}, },
plugins: (function () { plugins: Shared.getPlugins().concat([
const plugins = [ new CopyWebpackPlugin([
new CopyWebpackPlugin([ {
{ from: '../parity.package.json',
from: '../parity.package.json', to: 'package.json',
to: 'package.json', transform: function (content, path) {
transform: function (content, path) { const json = JSON.parse(content.toString());
const json = JSON.parse(content.toString()); json.version = packageJson.version;
json.version = packageJson.version; return new Buffer(JSON.stringify(json, null, ' '), 'utf-8');
return new Buffer(JSON.stringify(json, null, ' '), 'utf-8');
}
},
{
from: '../LICENSE'
},
{
from: '../parity.md',
to: 'README.md'
} }
], { copyUnmodified: true }) },
]; {
from: '../LICENSE'
if (isProd) { },
plugins.push(new webpack.optimize.UglifyJsPlugin({ {
screwIe8: true, from: '../parity.md',
compress: { to: 'README.md'
warnings: false }
}, ], { copyUnmodified: true })
output: { ])
comments: false
}
}));
}
return plugins;
}())
}; };

73
js/webpack/shared.js Normal file
View File

@ -0,0 +1,73 @@
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const webpack = require('webpack');
const HappyPack = require('happypack');
const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
function getPlugins (_isProd = isProd) {
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: 'js',
threads: 4,
loaders: _isProd ? ['babel'] : [
'react-hot',
'babel?cacheDirectory=true'
]
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(ENV),
RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
PARITY_URL: JSON.stringify(process.env.PARITY_URL),
LOGGING: JSON.stringify(!isProd)
}
})
];
if (_isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
warnings: false
},
output: {
comments: false
}
}));
}
return plugins;
}
module.exports = {
getPlugins: getPlugins
};

View File

@ -14,11 +14,12 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
const HappyPack = require('happypack');
const webpack = require('webpack'); const webpack = require('webpack');
const path = require('path');
const Shared = require('./shared');
const ENV = process.env.NODE_ENV || 'development'; const ENV = process.env.NODE_ENV || 'development';
const isProd = ENV === 'production';
const DEST = process.env.BUILD_DEST || '.build'; const DEST = process.env.BUILD_DEST || '.build';
let modules = [ let modules = [
@ -45,13 +46,6 @@ let modules = [
'scryptsy' 'scryptsy'
]; ];
if (!isProd) {
modules = modules.concat([
'webpack-dev-server/client?http://localhost:3000',
'react-hot-loader', 'core-js', 'core-js/library'
]);
}
module.exports = { module.exports = {
entry: { entry: {
vendor: modules vendor: modules
@ -71,43 +65,19 @@ module.exports = {
}, },
output: { output: {
filename: '[name].js', filename: '[name].js',
path: `${DEST}/`, path: path.resolve(__dirname, '../', `${DEST}/`),
library: '[name]_lib' library: '[name]_lib'
}, },
plugins: (function () { plugins: Shared.getPlugins().concat([
const plugins = [ new webpack.DllPlugin({
new webpack.DllPlugin({ name: '[name]_lib',
name: '[name]_lib', path: path.resolve(__dirname, '../', `${DEST}/[name]-manifest.json`)
path: `${DEST}/[name]-manifest.json` }),
}),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: JSON.stringify(ENV) NODE_ENV: JSON.stringify(ENV)
} }
}), })
])
new HappyPack({
id: 'js',
threads: 4,
loaders: ['babel']
})
];
if (isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
warnings: false
},
output: {
comments: false
}
}));
}
return plugins;
}())
}; };