Skip to content

Instantly share code, notes, and snippets.

@beau-gosse
Created June 20, 2018 15:13
Show Gist options
  • Save beau-gosse/2209df1452962c3939bba21bb075c6b5 to your computer and use it in GitHub Desktop.
Save beau-gosse/2209df1452962c3939bba21bb075c6b5 to your computer and use it in GitHub Desktop.
A sample webpack config file to quickly launch basic projects.
//! Webpack configuration file for production mode
// tested with webpack v4.12.0
/**
* Imports
*/
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
/**
* Paths
*/
const path = require('path');
const PATHS = {
root: path.resolve(__dirname, './'), // absolute path, project root
src: path.resolve(__dirname, 'src'),
dist: path.resolve(__dirname, 'dist'),
scss: path.resolve(__dirname, 'src', 'scss'),
js: path.resolve(__dirname, 'src', 'js'),
};
/**
* Config
*
* ?NOTE: config.mode option set in package.json
*/
const config = {
//* Context
// absolute string to the directory that contains the entry files
context: PATHS.src,
//* Entry
// the file webpack looks for to start building the bundle
// If an array is passed all items will be executed.
// the path is relative to the context dir above
entry: {
// relative path declaration
app: './js/app.js',
style: './scss/app.scss'
},
//* Output
output: {
path: PATHS.dist,
filename: './js/[name].[hash].min.js'
},
//* Exclude node_modules from bundle
// target: 'web', // ignore built-in modules like path, fs, etc.
// externals: [nodeExternals()],
//* Optimization
// remove “webpackBootstrap” code from bundled output
optimization: {
runtimeChunk: true
},
//* Module
// rules.test => what should webpack do once a file passes a particular test?
// rules.use => process the file using the specified loader
// rules.exclude => don't parse using the loader
module: {
rules: [
// babel-loader with 'env' preset
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// css-loader, sass-loader
{
test: /\.(s*)css$/,
include: PATHS.scss,
exclude: ["node_modules"],
use: ExtractTextPlugin.extract({
// comment off to prevent bundling of style-loader module
//fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: true
}
}, // minimize: true => minify css
{
loader: 'sass-loader'
}
],
})
}
]
},
//* Plugins
plugins: [
// move the css into the output folder
new ExtractTextPlugin({
filename: './css/[name].[hash].min.css',
disable: false,
allChunks: false
}),
// minify javascript
new UglifyJsPlugin(),
// empty the output folder before each build
new CleanWebpackPlugin(['dist']),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer()
]
}
})
],
//* Sourcemaps
devtool: 'none', // disable sourcemaps
}
/**
* Exports
*/
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment