Created
September 13, 2017 00:11
-
-
Save NigelGreenway/66d356ad7920375efabfe4c392df0f7f to your computer and use it in GitHub Desktop.
webpack config that works with both `SASS` => `CSS` file and hot loading the css within the `webpack-dev-server` watching for changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import merge from 'webpack-merge'; | |
import baseConfig from './../webpack.config.babel.js'; | |
import path from 'path'; | |
const ROOT_PATH = path.resolve( | |
path.join(__dirname, '/../') | |
); | |
module.exports = merge(baseConfig, { | |
output: { | |
filename: 'dasher.js', | |
path: path.join(__dirname, '/public'), | |
}, | |
module: { | |
loaders: [ | |
{ | |
test: /\.scss$/, | |
loaders: [ | |
'style-loader', | |
'css-loader', | |
'sass-loader', | |
], | |
}, | |
], | |
}, | |
devServer: { | |
inline: true, | |
contentBase: 'public', | |
}, | |
watch: true, | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import merge from 'webpack-merge'; | |
import baseConfig from './../webpack.config.babel.js'; | |
import CopyWebpackPlugin from 'copy-webpack-plugin'; | |
import ExtractTextPlugin from 'extract-text-webpack-plugin'; | |
import path from 'path'; | |
const PROJECT_ROOT = path.resolve('.'); | |
module.exports = merge(baseConfig, { | |
output: { | |
filename: 'dasher.js', | |
path: path.join(PROJECT_ROOT, '/build/asset'), | |
}, | |
module: { | |
loaders: [ | |
{ | |
test: /\.scss$/, | |
loader: ExtractTextPlugin.extract( | |
'css-loader', | |
'sass-loader' | |
), | |
}, | |
], | |
}, | |
plugins: [ | |
new ExtractTextPlugin({ | |
filename: './style.css', | |
allChunks: true, | |
}), | |
new CopyWebpackPlugin([ | |
{ | |
from: path.join(PROJECT_ROOT, '/public/'), | |
to: path.join(PROJECT_ROOT, '/build/'), | |
} | |
]), | |
], | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import webpack from 'webpack'; | |
import FlowStatusWebpackPlugin from 'flow-status-webpack-plugin'; | |
import ExtractTextPlugin from 'extract-text-webpack-plugin'; | |
import path from 'path'; | |
module.exports = { | |
entry: path.join(__dirname, '/src/app.js'), | |
target: 'web', | |
module: { | |
loaders: [ | |
{ | |
test: /\.(js|jsx)$/, | |
include: path.join(__dirname, '/src'), | |
exclude: path.join(__dirname, '/node_modules/'), | |
loaders: [ | |
'babel-loader', | |
], | |
}, | |
], | |
}, | |
plugins: [ | |
new webpack.NoEmitOnErrorsPlugin(), | |
new FlowStatusWebpackPlugin({ | |
restartFlow: true, | |
failOnError: true, | |
}), | |
], | |
resolve: { | |
extensions: ['.js', '.jsx'], | |
}, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment