Last active
January 10, 2020 15:23
-
-
Save smarteist/583e3794e645190029fd1171952cba28 to your computer and use it in GitHub Desktop.
Webpack configs
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 HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); | |
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
const CompressionPlugin = require('compression-webpack-plugin'); | |
const TerserPlugin = require('terser-webpack-plugin'); | |
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); | |
const webpack = require('webpack'); | |
const path = require('path'); | |
const globSync = require('glob').sync; | |
module.exports = (env, options) => ({ | |
entry: ["./src/index.js"], | |
devServer: { | |
contentBase: "./dist" | |
}, | |
devtool: "source-map", | |
module: { | |
rules: [ | |
{ | |
test: /\.(scss|css)$/, | |
use: [ | |
options.mode !== "production" ? | |
"style-loader" : { | |
loader: MiniCssExtractPlugin.loader, | |
options: { | |
publicPath: "../" | |
} | |
}, | |
"css-loader", | |
{ | |
loader: 'postcss-loader', | |
options: { | |
plugins: function () { | |
return [ | |
require('precss'), | |
require('autoprefixer') | |
]; | |
} | |
} | |
}, | |
"sass-loader" | |
] | |
}, | |
{ | |
test: /\.(png|jpe?g|gif|svg)$/i, | |
use: [ | |
{ | |
loader: "file-loader", | |
options: { | |
name: "[name].[ext]", | |
outputPath: "img/", | |
esModule: false, | |
} | |
} | |
] | |
}, | |
{ | |
test: /\.(html)$/, | |
use: { | |
loader: "html-srcsets-loader", | |
options: { | |
attrs: [":src", ':srcset'], | |
interpolate: true, | |
} | |
} | |
}, | |
{ | |
test: /\.js$/, | |
exclude: /(node_modules|bower_components)/, | |
use: { | |
loader: "babel-loader", | |
options: { | |
presets: ["@babel/preset-env"] | |
} | |
} | |
}, | |
{ | |
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, | |
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin | |
use: { | |
loader: 'url-loader', | |
options: { | |
limit: 10000, // if less than 100 kb, add base64 encoded image to css | |
name: "[name].[ext]", // if more than 10 kb move to this folder in build using file-loader | |
outputPath: "fonts/", | |
} | |
} | |
}, | |
{ | |
test: /\.(ttf|eot)(\?[\s\S]+)?$/, | |
use: { | |
loader: 'file-loader', | |
options: { | |
name: "[name].[ext]", | |
outputPath: "fonts/", | |
} | |
} | |
}, | |
] | |
}, | |
plugins: [ | |
new MiniCssExtractPlugin({ | |
filename: "css/[name].[contenthash].css" | |
}), | |
new CleanWebpackPlugin(), | |
...globSync("src/html/**/*.html").map(fileName => { | |
return new HtmlWebpackPlugin({ | |
template: fileName, | |
inject: "body", | |
filename: fileName.replace("src/html/", "") | |
}); | |
}), | |
new webpack.ProvidePlugin({ | |
$: "jquery", | |
jQuery: "jquery", | |
'window.$': 'jquery', | |
"window.jQuery": "jquery", | |
Popper: ["popper.js", "default"], | |
Util: "exports-loader?Util!bootstrap/js/dist/util", | |
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown" | |
}) | |
], | |
optimization: | |
{ | |
minimizer: [ | |
new TerserPlugin({ | |
parallel: true, | |
terserOptions: { | |
ecma: 6, | |
}, | |
}), | |
new CompressionPlugin({ | |
test: /\.js$|\.css(\?.*)?$/i | |
}), | |
new OptimizeCSSAssetsPlugin({}) | |
] | |
} | |
, | |
output: { | |
filename: "[name].js", | |
path: | |
path.resolve(__dirname, "dist"), | |
publicPath: | |
"" | |
} | |
}) | |
; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment