ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

25
webpack.config.js
View File

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