Skip to content

Instantly share code, notes, and snippets.

@chrisjimallen
Created April 12, 2018 13:25
Show Gist options
  • Save chrisjimallen/9ea89c4f174a4e5b7e423a553ec642c1 to your computer and use it in GitHub Desktop.
Save chrisjimallen/9ea89c4f174a4e5b7e423a553ec642c1 to your computer and use it in GitHub Desktop.
Basic Webpack 4 starter. This will build images, sass & js.
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')
const path = require('path')
module.exports = {
// Set entry & output paths
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'assets'),
filename: 'app.min.js'
},
module: {
rules: [
// ES6 Javascript
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
// outputPath: './media/',
context: './src'
}
}
},
// CSS & SASS
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: {
safe: true
}
}
},
{
loader: 'postcss-loader',
options: {
autoprefixer: {
browsers: ['last 2 versions']
},
plugins: () => [
autoprefixer
]
}
},
{
loader: 'sass-loader',
options: {}
}
]
}
]
},
plugins: [
// Extract the CSS from the webpack bundle and put into a seperate file
new MiniCssExtractPlugin({
filename: 'css/app.css',
chunkFilename: '[id].css'
}),
// Wipe the assets folder each time
new CleanWebpackPlugin('assets')
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment