This weeks episode dives in to Webpack 4 release, how EASY it is, and what you can do to get started.
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
dist: path.join(__dirname, 'dist'),
};
mode: "production",
module.exports = {
devtool: "source-map",
entry: {
app: PATHS.app
},
output: {
path: PATHS.dist,
filename: "[name].js",
publicPath: "/"
},
devServer: {
open: true,
compress: true,
historyApiFallback: true,
contentBase: "dist"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// Could also be write as follow:
// use: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
use: [
{
loader: "css-loader",
query: {
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
},
"postcss-loader"
]
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
},
{
test: /\.(png|jpe?g|gif|svg|ttf|eot|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {
// path where the images will be saved
name: "assets/[name].[ext]"
}
},
{
loader: "image-webpack-loader",
options: {
mozjpeg: {
quality: 65
},
pngquant: {
quality: "10-20",
speed: 4
},
svgo: {
plugins: [
{
removeViewBox: false
},
{
removeEmptyAttrs: false
}
]
},
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7,
interlaced: false
}
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin([PATHS.dist]),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/public", "index.html"),
favicon: "src/public/images/fav.png",
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
ecma: 8,
compress: {
warnings: false,
drop_console: true
},
output: {
comments: false,
beautify: false
},
warnings: false
}
}),
new webpack.optimize.AggressiveMergingPlugin(), //Merge chunks
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new CopyWebpackPlugin([
{ from: PATHS.app + "/public/static", to: PATHS.dist }, // Copy everything from src/public/static to dist folder
// { from: require.resolve("workbox-sw"), to: "workbox-sw.prod.js" }
]),
// new WorkboxPlugin({
// globDirectory: "./dist/",
// globPatterns: ["**/*.{html,js,css,png,jpg}"],
// swSrc: "./src/client/sw.js",
// swDest: "./dist/service-worker.js"
// })
]
}
