1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 01:13:14 +01:00

Add separate extract build command and disable it by default on development

Using ExtractTextPlugin disables hot reloading for CSS, so we only
enable it in production.
This commit is contained in:
Brett Sun 2016-06-03 18:06:51 +02:00
parent d6c1dca63a
commit 7610d74c4c
2 changed files with 17 additions and 9 deletions

View File

@ -17,6 +17,7 @@
"start": "NODE_ENV=production node server.js",
"build:dev": "rimraf ./build && NODE_ENV=development webpack",
"build:extract": "rimraf ./build && NODE_ENV=extract webpack",
"clean": "rimraf ./build ./dist",
"start:dev": "NODE_ENV=development node server.dev.js",
"lint": "eslint ./",

View File

@ -14,6 +14,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
require('dotenv').load({ silent: true });
const EXTRACT = process.env.NODE_ENV === 'extract';
const PRODUCTION = process.env.NODE_ENV === 'production';
const PATHS = {
@ -61,13 +62,6 @@ const PLUGINS = [
},
]),
// Extract stylesheets out of bundle
new ExtractTextPlugin(
PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', {
allChunks: true
}
),
// Generate index.html for app with link and style tags addded
new HtmlWebpackPlugin({
filename: 'index.html',
@ -97,6 +91,15 @@ const PROD_PLUGINS = [
}),
];
if (PRODUCTION || EXTRACT) {
// Extract stylesheets out of bundle
PLUGINS.push(
new ExtractTextPlugin(PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', {
allChunks: true
})
);
}
if (PRODUCTION) {
PLUGINS.push(...PROD_PLUGINS);
}
@ -161,7 +164,8 @@ const LOADERS = [
{
test: /\.s[ac]ss$/,
exclude: [PATHS.NODE_MODULES],
loader: ExtractTextPlugin.extract('style', SASS_LOADER),
loader: PRODUCTION || EXTRACT ? ExtractTextPlugin.extract('style', SASS_LOADER)
: `style!${SASS_LOADER}`,
},
// Dependencies
@ -187,7 +191,10 @@ const LOADERS = [
/** EXPORTED WEBPACK CONFIG **/
const config = {
entry: ['bootstrap-loader/extractStyles', PATHS.APP],
entry: [
PRODUCTION || EXTRACT ? 'bootstrap-loader/extractStyles' : 'bootstrap-loader',
PATHS.APP
],
output: {
filename: PRODUCTION ? 'js/bundle.min.js' : 'js/bundle.js',