Webpack 4 NodeJS
Tech_Uncensored Podcast
English - May 23, 2018 20:26 - ★★★★★ - 1 ratingTechnology News Tech News web development tech technology javascript html css scss sass node Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
This weeks episode dives in to Webpack 4 release, how EASY it is, and what you can do to get started.
https://github.com/webpack/webpack
example:
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"
// })
]
}