Extract CSS to file in production builds (#3783)

* Extract CSS to file if production build

* Use DAPPS_URL for testing purposes + better assets in Webpack

* Delete comments
This commit is contained in:
Nicolas Gotchac 2016-12-10 23:55:57 +01:00 committed by Jaco Greeff
parent b0f1665f11
commit b44e7bb292
2 changed files with 35 additions and 9 deletions

View File

@ -51,9 +51,16 @@ export default class Dapp extends Component {
src = `${dappsUrl}/${app.contentHash}/`; src = `${dappsUrl}/${app.contentHash}/`;
break; break;
default: default:
const dapphost = process.env.NODE_ENV === 'production' && !app.secure let dapphost = process.env.DAPPS_URL || (
process.env.NODE_ENV === 'production' && !app.secure
? `${dappsUrl}/ui` ? `${dappsUrl}/ui`
: ''; : ''
);
if (dapphost === '/') {
dapphost = '';
}
src = `${dapphost}/${app.url}.html`; src = `${dapphost}/${app.url}.html`;
break; break;
} }

View File

@ -20,6 +20,7 @@ const path = require('path');
const WebpackErrorNotificationPlugin = require('webpack-error-notification'); 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 ExtractTextPlugin = require('extract-text-webpack-plugin');
const Shared = require('./shared'); const Shared = require('./shared');
const DAPPS = require('../src/dapps'); const DAPPS = require('../src/dapps');
@ -41,7 +42,7 @@ module.exports = {
output: { output: {
publicPath: '/', publicPath: '/',
path: path.join(__dirname, '../', DEST), path: path.join(__dirname, '../', DEST),
filename: '[name].[hash].js' filename: '[name].[hash:10].js'
}, },
module: { module: {
@ -85,13 +86,20 @@ module.exports = {
{ {
test: /\.css$/, test: /\.css$/,
include: [ /src/ ], include: [ /src/ ],
// exclude: [ /src\/dapps/ ],
loader: isProd ? ExtractTextPlugin.extract([
// 'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader'
]) : undefined,
// use: [ 'happypack/loader?id=css' ] // use: [ 'happypack/loader?id=css' ]
use: [ use: isProd ? undefined : [
'style-loader', 'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader' 'postcss-loader'
] ]
}, },
{ {
test: /\.css$/, test: /\.css$/,
exclude: [ /src/ ], exclude: [ /src/ ],
@ -99,11 +107,15 @@ module.exports = {
}, },
{ {
test: /\.(png|jpg)$/, test: /\.(png|jpg)$/,
use: [ 'file-loader?name=[name].[hash].[ext]' ] use: [ 'file-loader?&name=assets/[name].[hash:10].[ext]' ]
}, },
{ {
test: /\.(woff(2)|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, test: /\.(woff(2)|ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [ 'file-loader' ] use: [ 'file-loader?name=fonts/[name][hash:10].[ext]' ]
},
{
test: /\.svg(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [ 'file-loader?name=assets/[name].[hash:10].[ext]' ]
} }
], ],
noParse: [ noParse: [
@ -153,13 +165,20 @@ module.exports = {
if (!isProd) { if (!isProd) {
plugins.push( plugins.push(
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
filename: 'commons.[hash].js', filename: 'commons.[hash:10].js',
name: 'commons', name: 'commons',
minChunks: Infinity minChunks: Infinity
}) })
); );
} }
if (isProd) {
plugins.push(new ExtractTextPlugin({
filename: 'styles/[name].[hash:10].css',
allChunks: true
}));
}
return plugins; return plugins;
}()) }())
}; };