Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
webpack.config.js
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const sourcePath = path.resolve(__dirname, 'public')
const isProduction = process.env.NODE_ENV === 'production'
const stats = {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true
}
let plugins = [
new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true })
]
let cssLoader
if (isProduction) {
plugins.push(
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
}
})
)
cssLoader = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
module: true, // css-loader 0.14.5 compatible
modules: true,
localIdentName: '[hash:base64:5]'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'collapsed',
sourceMap: true,
includePaths: [sourcePath]
}
}
]
})
} else {
plugins.push(
// show module names instead of numbers in webpack stats
new webpack.NamedModulesPlugin(),
// don't spit out any errors in compiled assets
new webpack.NoEmitOnErrorsPlugin()
)
cssLoader = [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
module: true,
sourceMap: true,
localIdentName: '[path][name]-[local]'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
includePaths: [sourcePath]
}
}
]
}
module.exports = {
entry: {
main: sourcePath + '/scripts/index'
},
output: {
path: sourcePath + '/compiled',
filename: 'scripts.js'
},
module: {
rules: [
{
test: /\.(html|svg|jpe?g|png|ttf|woff2?)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
name: 'static/[name]-[hash:8].[ext]'
}
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: cssLoader
}
]
},
watch: !isProduction,
watchOptions: {
aggregateTimeout: 100
},
devtool: isProduction ? false : 'inline-cheap-module-source-map',
plugins,
stats
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment