Created
June 20, 2018 15:13
-
-
Save beau-gosse/2209df1452962c3939bba21bb075c6b5 to your computer and use it in GitHub Desktop.
A sample webpack config file to quickly launch basic projects.
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
//! 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