Created
October 25, 2017 07:35
-
-
Save cezarderevlean/68fb89adbc1f21a167fe7054c7722c30 to your computer and use it in GitHub Desktop.
Webpack config example
This file contains 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
const rootUrl = '/'; | |
const path = require('path'); | |
const webpack = require('webpack'); | |
const autoprefixer = require('autoprefixer'); | |
const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
const WebpackNotifier = require('webpack-notifier'); | |
const extractStyle = new ExtractTextPlugin({ | |
filename: 'bundle.css', | |
disable: process.env.NODE_ENV !== 'production' // enable only in prod | |
}); | |
const cssLoader = { | |
loader: 'css-loader', | |
options: { | |
sourceMap: true, | |
importLoaders: 1 | |
} | |
}; | |
const postcssLoader = { | |
loader: 'postcss-loader', | |
options: { | |
sourceMap: true, | |
plugins: () => [ | |
autoprefixer( | |
'> 1%', | |
'last 2 versions', | |
'ie >= 9' | |
) | |
] | |
} | |
}; | |
const sassLoader = { | |
loader: 'sass-loader', | |
options: { | |
sourceMap: true, | |
includePaths: [ | |
path.resolve('./node_modules/foundation-sites/scss') | |
] | |
} | |
}; | |
const PROD = process.env.NODE_ENV === 'production'; | |
module.exports = { | |
name: 'Client webpack', | |
devtool: PROD | |
? 'source-map' | |
: 'eval-source-map', // 'cheap-module-eval-source-map', | |
entry: { | |
main: (PROD ? [ // PROD | |
] : [ // DEV | |
'react-hot-loader/patch' // HMR | |
]).concat([ // BOTH | |
'./src/index.jsx' | |
]) | |
}, | |
output: { | |
path: PROD | |
? path.resolve(__dirname, 'dist') | |
: path.resolve(__dirname, 'build'), | |
filename: '[name].js', | |
chunkFilename: '[name]-[id].js', | |
publicPath: PROD ? rootUrl : '/', | |
}, | |
devServer: { | |
hot: !PROD, // disable HMR in prod | |
// contentBase: PROD ? path.join(__dirname, 'dist') : path.join(__dirname, 'build') | |
historyApiFallback: true | |
}, | |
plugins: [ // GENERAL | |
new HtmlWebpackPlugin({ | |
template: 'ejs-compiled-loader!./src/templates/index.ejs', | |
filename: 'index.html', | |
inject: 'body' | |
}), | |
new WebpackNotifier({excludeWarnings: true}), | |
extractStyle, | |
].concat(PROD ? [ // PROD | |
new webpack.DefinePlugin({ // env var, use in JS | |
'process.env' : { NODE_ENV: JSON.stringify('production') } | |
// PROD: JSON.stringify(PROD) | |
}), | |
new webpack.optimize.UglifyJsPlugin() | |
] : [ // DEV | |
new webpack.NamedModulesPlugin(), | |
new webpack.HotModuleReplacementPlugin() | |
]), | |
module: { | |
rules: [{ | |
test: /\.jsx?$/, | |
exclude: /node_modules/, | |
use: [ | |
'babel-loader', // config: .babelrc | |
'eslint-loader' // config: .eslintrc | |
] | |
}, { | |
test: /\.css$/, | |
use: extractStyle.extract({ | |
fallback: 'style-loader', | |
use: [ | |
cssLoader, | |
postcssLoader | |
] | |
}) | |
}, { | |
test: /\.scss$/, | |
use: extractStyle.extract({ | |
fallback: 'style-loader', | |
use: [ | |
cssLoader, | |
postcssLoader, | |
'resolve-url-loader', | |
sassLoader | |
] | |
}) | |
}, { // images | |
test: /\.(png|jpe?g|gif)$/, | |
loader: 'url-loader?limit=25000&name=img/[name].[ext]' // inlines it if small | |
}, { // svg | |
test: /\.svg$/, | |
loader: 'file-loader?name=img/[name].[ext]' | |
}, { // fonts | |
test: /\.(eot|woff|woff2|ttf)$/, | |
loader: 'url-loader?limit=25000&name=fonts/[name].[ext]' | |
}] | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment